/* スマホ版の作り直し（2026-10-25 大石さん「A（アプリ風に短く）に、Bの『＋で開く』を組み合わせて」）
   site.css のあとに読む。幅767px以下だけに効く。PCの見た目は変えない。
   触らない所（ヒダネHP制作の担当）：.lf-*（相談フォームとLINE）・.tr-form・特設LP（/special/<名前>）
   - A：下に固定の帯（ホーム・サービス・事例・質問・LINEで相談）。同じ種類のカードは横に指で送る
   - B：長い章は途中で畳み、「＋ 続きを見る」で開く（mobile.js が .m-fold を付ける）
   - 共通：文字は小さすぎないように、押す所は高さ44px以上 */

@media (max-width: 767px) {

  /* 横に指で送る所のほかは、ページが横に揺れないように */
  html, body { overflow-x: clip; }

  /* ---------- 下に固定の帯（mobile.js が作る） ---------- */
  body.m-has-tab { padding-bottom: calc(64px + env(safe-area-inset-bottom)); }
  .m-tab {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 900;
    display: grid; grid-template-columns: 1fr 1fr 1fr 1fr 1.9fr;
    height: calc(60px + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom);
    background: var(--ink, #0b0e10); border-top: 3px solid var(--red, #c41e24);
  }
  .m-tab a, .m-tab button {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
    min-height: 44px; color: #fff; text-decoration: none; background: none; border: 0; padding: 0;
    font: 700 11.5px/1.1 inherit; letter-spacing: .02em; cursor: pointer;
  }
  .m-tab svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; }
  .m-tab [aria-current="page"] { color: #ff6b70; }
  .m-tab .m-line { background: #06c755; color: #fff; font-size: 13px; font-weight: 900; margin: 8px 8px 8px 2px; border-radius: 4px; flex-direction: row; gap: 5px; white-space: nowrap; }
  .m-tab .m-line svg { width: 20px; height: 20px; fill: #fff; stroke: none; }
  /* 申込み・診断の7ページ：「LINEで相談」1つだけ（mobile.js の FORM_PAGES） */
  .m-tab.m-only { grid-template-columns: 1fr !important; }
  .m-tab.m-only .m-line { margin: 8px 16px; font-size: 16px; }

  /* 右下の丸いチャットボタンと吹き出しは、下の帯の「質問」にまとめる（本文に重ならないように） */
  .hcb-chat .hcb-btn, .hcb-chat .hcb-tip { display: none !important; }
  .hcb-chat { bottom: calc(68px + env(safe-area-inset-bottom)) !important; z-index: 950; }
  .hcb-chat .hcb-panel { max-height: calc(100svh - 150px); }
  /* チャットを開いている間は、下の帯を隠す（チャットの下の入力欄と重ならないように） */
  body:has(.hcb-chat.is-open) .m-tab, body:has(.hcb-panel:not([hidden])) .m-tab { display: none; }

  /* ---------- 上の帯：押しやすく ---------- */
  /* 無料特典・相談する・メニューの3つを同じ高さ（38px）にそろえ、文字を上下のまん中に（2026-10-25 大石さん「ここおかしいので直して」） */
  .hd .nav { align-items: center !important; gap: 6px; }
  .hd .nav .nav-perk { display: inline-flex !important; align-items: center; justify-content: center; height: 38px; min-height: 0; padding: 0 9px !important; line-height: 1; box-sizing: border-box; }
  .hd .nav .cta { display: inline-flex; align-items: center; height: 38px; padding: 0 14px; box-sizing: border-box; }
  .hd .nav .cta span { line-height: 1; }
  .hd .nav-burger { width: 42px; height: 38px; min-width: 0; min-height: 0; }
  .m-menu .m-links a, .m-menu .m-sp-btn { min-height: 48px; display: flex; align-items: center; }
  .m-menu .m-links a.m-add { font-size: 15px; }

  /* ---------- 章と章の間：余白を詰める（PCの余白のままだと、スマホでは何もない画面が続く） ---------- */
  .sec { padding-top: 56px !important; padding-bottom: 56px !important; }

  /* トップの支援4つ：「マーケティング」が「マーケティン／グ」と折れないように */
  .svc-tx .name { font-size: 28px !important; width: auto !important; max-width: 100%; padding: 8px 22px !important; }
  .svc-tx .name span.nw { white-space: nowrap; }

  /* トップの「選ばれる理由」：見出しと4つの理由を先に、写真はあとに小さく */
  #reason .in-w { display: flex; flex-direction: column; }
  #reason .reasons { order: 1; display: flex !important; flex-direction: column; gap: 24px; }
  #reason .reasons > div:not(.house-wrap) { order: 1; }
  #reason .house-wrap { order: 2; max-width: 260px; margin: 0 auto; }
  #reason .withyou { order: 2; margin-top: 32px; }
  #reason .capband { order: 3; }

  /* ---------- トップの最初の画面：PCと同じ小物（ロボット・時計・電球など18個）を、電話の左うしろに（2026-10-25 大石さん「トップはこれ入れて下さい」） ---------- */
  .hero .visual .xmat { display: block !important; position: absolute; left: -8%; top: 3%; bottom: auto; width: 66%; height: 100%; z-index: 0; }
  .hero .visual .phone { left: 66%; z-index: 2; }
  .hero .visual .bigring { z-index: 1; }

  /* ---------- 最初の画面の下の「無料特典」：2列の小さな箱をやめ、1行ずつの押しやすい帯に（大石さん「無料特典が見にくい」） ---------- */
  .perkstrip .ps-items { display: flex !important; flex-direction: column; gap: 8px; grid-template-columns: none !important; }
  .perkstrip .ps-items a { position: relative; display: flex !important; flex-direction: column; justify-content: center; min-height: 64px; padding: 10px 44px 10px 14px !important; }
  .perkstrip .ps-items a::after { content: "→"; position: absolute; right: 14px; top: 50%; transform: translateY(-50%); color: var(--red, #c41e24); font-weight: 900; font-size: 20px; }
  .perkstrip .ps-items b { font-size: 17px !important; line-height: 1.35; }
  .perkstrip .ps-items small { font-size: 13px !important; margin-top: 2px; color: #c9c9c9; }

  /* ---------- ページの最後の「無料特典」：横に送るのをやめ、全部が縦に見える形に。箱の中の余白を詰める ---------- */
  .contact .offers, .contact .perks-s { display: flex !important; flex-direction: column; gap: 14px; grid-template-columns: none !important; }
  .contact .offer { padding: 22px 16px 18px !important; margin: 0 !important; }
  .contact .offer h3 { font-size: 24px !important; line-height: 1.3; margin: 8px 0 14px !important; }
  .contact .offer .perk-hot { top: -12px !important; }
  .contact .perk-s { padding: 16px !important; margin: 0 !important; }
  .contact .perk-s h3 { font-size: 19px !important; margin: 6px 0 12px !important; }
  .contact .offer .b-main, .contact .perk-s .b-main { width: 100%; }

  /* ---------- 無料サービス詳細（/free）：横送りをやめて7つとも縦に。文字は名前・ひとこと・ボタンだけ（2026-10-25 大石さん「他の無料特典見逃しちゃいそう…文字多くなくっていい…縦で全部表示」）。
     内容・対象・受け取り方（.fr-dl）はスマホでは出さない（PCでは今まで通り）。「詳しく見る」は残す ---------- */
  .frs { display: flex !important; flex-direction: column; gap: 14px; grid-template-columns: none !important; }
  .frs .fr { padding: 18px 16px !important; margin: 0 !important; }
  .frs .fr .fr-dl { display: none !important; }
  .frs .fr .fr-h h2 { font-size: 22px !important; line-height: 1.3; margin: 8px 0 12px !important; }
  .frs .fr .fr-detail { margin: 0 0 10px !important; }
  .frs .fr .fr-btns { margin-top: 4px !important; }
  .frs .fr .b-main { width: 100%; }

  /* ---------- 横に指で送るカード ---------- */
  .m-row {
    display: flex !important; flex-wrap: nowrap !important; gap: 12px !important;
    overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-left: var(--pad, 16px);
    margin-left: calc(var(--pad, 16px) * -1) !important; margin-right: calc(var(--pad, 16px) * -1) !important;
    padding: 4px var(--pad, 16px) 16px !important;
    scrollbar-width: none; grid-template-columns: none !important;
  }
  .m-row::-webkit-scrollbar { display: none; }
  .m-row > * { flex: 0 0 82% !important; max-width: 82% !important; width: auto !important; scroll-snap-align: start; margin: 0 !important; transform: none !important; }
  .m-row.m-narrow > * { flex-basis: 64% !important; max-width: 64% !important; }
  .m-row-hint { display: flex; justify-content: space-between; align-items: center; margin: 4px 0 6px; font-size: 13px; font-weight: 700; color: #555; }
  .m-row-hint b { color: var(--red, #c41e24); font-variant-numeric: tabular-nums; }
  .m-row-hint i { font-style: normal; }
  .redsec .m-row-hint, .k .m-row-hint, .agents-sec .m-row-hint, .pets-sec .m-row-hint { color: #ddd; }

  /* ---------- 「＋ 続きを見る」で開く（B） ---------- */
  .m-fold { position: relative; max-height: var(--m-fold-h, 900px); overflow: hidden; }
  .m-fold::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 120px; pointer-events: none;
    background: linear-gradient(rgba(255, 255, 255, 0), var(--m-fold-bg, #fff) 85%);
  }
  .m-fold.open { max-height: none; overflow: visible; }
  .m-fold.open::after { display: none; }
  .m-more {
    display: flex; align-items: center; justify-content: center; gap: 8px; width: calc(100% - var(--pad, 16px) * 2);
    margin: 4px auto 0; min-height: 48px; border: 2px solid var(--ink, #0b0e10); background: #fff; color: var(--ink, #0b0e10);
    font: 900 15px/1 inherit; cursor: pointer; position: relative; z-index: 2;
  }
  .m-more .pm { font-size: 20px; line-height: 1; color: var(--red, #c41e24); }

  /* ---------- 表は縦のカードに ---------- */
  table.m-cards, table.m-cards tbody, table.m-cards tr, table.m-cards td { display: block; width: 100% !important; min-width: 0 !important; }
  table.m-cards thead { display: none; }
  table.m-cards { border: 0 !important; }
  table.m-cards tr { border: 2px solid var(--ink, #0b0e10); margin: 0 0 10px; padding: 6px 10px; background: #fff; }
  table.m-cards td { border: 0 !important; padding: 4px 0 !important; text-align: left !important; display: flex; justify-content: space-between; gap: 12px; }
  table.m-cards td::before { content: attr(data-label); font-weight: 700; color: #555; flex: none; max-width: 48%; }
  table.m-cards td:first-child { font-weight: 900; font-size: 16px; }
  table.m-cards td:first-child::before { content: none; }
  table.m-cards caption { display: block; text-align: left; }
  .m-tablewrap { overflow: visible !important; }

  /* ---------- トップ：悩みの章とPCの場面を短く（動きを減らす設定の形を土台に） ---------- */
  .worry { height: auto !important; padding: 56px 0 24px; background: #fff !important; }
  .worry-pin { position: static !important; height: auto !important; overflow: visible !important; }
  .worry-bg { display: none; }
  .worry-ttl { position: static !important; opacity: 1 !important; transform: none !important; padding: 0 var(--pad, 16px); }
  .worry-ttl .stripe { transform: scaleX(1) !important; }
  .worry-zoom { position: static !important; transform: none !important; }
  .worry-pc { position: relative !important; left: auto !important; top: auto !important; transform: none !important; opacity: 1 !important;
    height: auto !important; width: 100% !important; aspect-ratio: auto !important; margin: 18px 0 0; }
  .worry-pc > img { display: none; }
  .worry-scr { position: static !important; width: auto !important; height: auto !important; margin: 0 var(--pad, 16px);
    border: 3px solid var(--ink, #0b0e10); box-shadow: 6px 6px 0 var(--red, #c41e24); background: #fff !important; }
  .worry-scr .chat-hd, .worry-scr .chat-log, .worry-scr .chat-in { visibility: visible !important; }
  .worry-scr .chat-log { max-height: none !important; overflow: visible !important; }
  .worry-scr .chat-log .m { opacity: 1 !important; transform: none !important; display: block !important; font-size: 15px !important;
    max-height: none !important; padding-top: .5em !important; padding-bottom: .5em !important; transition: none !important; }
  .worry-scr .chat-log .me { display: flex !important; }
  .worry-scr .chat-in, .worry-scr .scr-fill { display: none !important; }
  .desk { position: static !important; opacity: 1 !important; visibility: visible !important; background: none !important; padding: 36px 0 0; }
  .desk-bar, .swipe-hint, .aicur, .desk-cap .capband { display: none !important; }
  .desk-ttl b { font-size: 22px !important; }
  .desk-ttl small { font-size: 12px !important; }
  .desk .m-row .win { position: relative !important; left: auto !important; top: auto !important; height: auto !important;
    opacity: 1 !important; visibility: visible !important; transform: none !important; display: block !important; }
  .desk .win .wbody .side, .desk .win .wbody .pane { display: none !important; }
  .desk .win .toast { position: static !important; opacity: 1 !important; transform: none !important; margin: 14px; display: flex !important; }
  .desk .win .toast span { font-size: 14px; }
  .desk .win .toast b { display: block; font-size: 16px; }
  .desk .win header b { font-size: 15px !important; }
  .desk-cap { position: static !important; padding: 0 var(--pad, 16px); }
  .desk .m-row { margin-left: 0 !important; margin-right: 0 !important; }
  .desk .m-row-hint { padding: 0 var(--pad, 16px); }
  .desk-note { font-size: 12px !important; text-align: left !important; }

  /* 宣言の章：画面に止めず、そのまま見せる */
  .manifest { height: auto !important; padding: 72px var(--pad, 16px) !important; }
  .manifest .mf-pin { position: static !important; height: auto !important; }

  /* ---------- 下の案内：見出しを押すと開く ---------- */
  .ft .ft-cols nav > b { display: flex; justify-content: space-between; align-items: center; min-height: 48px; cursor: pointer; border-bottom: 1px solid rgba(0, 0, 0, .2); margin: 0; }
  .ft .ft-cols nav > b::after { content: "＋"; color: var(--red, #c41e24); font-size: 18px; }
  .ft .ft-cols nav.m-open > b::after { content: "−"; }
  .ft .ft-cols nav:not(.m-open) > a { display: none !important; }
  .ft .ft-cols nav > a { min-height: 40px; display: flex !important; align-items: center; }
  .ft .ft-cols { display: block !important; width: 100%; }
  .ft .in-w { display: block !important; }
  .ft .in-w > .brand { display: block; margin: 0 0 12px; }
  .ft .ft-cols nav { text-align: left !important; }
  .subnav a { min-height: 40px; display: inline-flex; align-items: center; }
  .ft p a { display: inline-block; min-height: 32px; line-height: 32px; }

  /* 記事の道しるべ（ホーム＞…）を押しやすく */
  .crumbs a, .bc a, nav[aria-label="パンくず"] a { display: inline-block; padding: 8px 0; }

  /* 資料の選択欄を大きく */
  input[type="checkbox"]:not(.lf-input):not([class*="lf-"]), input[type="radio"]:not([class*="lf-"]) { width: 22px; height: 22px; }

}

/* とても狭いスマホ（幅359px以下）：下の帯の文字と絵を少し小さく */
@media (max-width: 359px) {
  .m-tab { grid-template-columns: 1fr 1fr 1fr 1fr 2fr; }
  .m-tab a, .m-tab button { font-size: 10.5px; }
  .m-tab svg { width: 19px; height: 19px; }
  .m-tab .m-line { font-size: 12px; gap: 3px; margin: 8px 6px 8px 0; }
  .m-tab .m-line svg { width: 16px; height: 16px; }
}