/* ==========================================================================
   mobile-top.css — トップページのスマホ最適化（2026-10-11）
   - 読み込み順: 既存CSSの最後（section-refinements.css の後）
   - 767px 以下のみ適用。PC表示（768px 以上）は一切変更しない
   - 既存の見た目・配色・画像・文章はそのまま。寸法・改行・余白・タップ領域のみ調整
   ========================================================================== */

@media (max-width: 767px) {

  /* ---------- 0. 共通：横はみ出しの原因側を直す ---------- */
  /* 画像・動画・iframe は親幅を超えない */
  main img, main video, main svg, main iframe { max-width: 100%; }
  .tl-world__map { height: auto; }
  /* 長い英単語・URL で折り返せない箇所 */
  .footer .links_area, .tl-faq-answer, .texts { overflow-wrap: anywhere; }

  /* ---------- 1. ヘッダー・メニュー・追従ボタン ---------- */
  /* ロゴとハンバーガーが重ならないようにロゴ幅を抑える */
  .head.index .logo { max-width: calc(100vw - 118px); }
  .head.index .logo img { width: 100%; max-width: 190px; height: auto; }
  @supports (padding-top: env(safe-area-inset-top)) {
    .head.index .logo { padding-top: env(safe-area-inset-top); }
  }

  /* メニュー：画面高さに応じてスクロールできる。iOS の慣性スクロールと安全領域 */
  .global-nav { -webkit-overflow-scrolling: touch; }
  .global-nav .nav_inr {
    min-height: calc(100dvh - 28px);
    padding-bottom: calc(60px + env(safe-area-inset-bottom)) !important;
  }

  /* 追従CTA：本文を隠さないよう body の下余白をバー高さ分確保 */
  body { padding-bottom: calc(68px + env(safe-area-inset-bottom)); }
  .tl-follow > a, .tl-follow > a:nth-child(2), .tl-follow > a:nth-child(3) {
    min-height: 48px;           /* タップ領域 44px 以上 */
    white-space: nowrap;
  }
  .tl-follow a span, .tl-follow > a .tl-follow-emoji { flex: none; }

  /* ---------- 2. ファーストビュー ---------- */
  #kv.tl-hero { padding-left: 20px; padding-right: 20px; }
  .tl-hero__title {
    font-size: clamp(24px, 7.4vw, 28px);
    line-height: 1.42;
    text-wrap: balance;         /* 対応ブラウザでは「を」だけの折り返しを防ぐ */
  }
  .tl-hero__lead {
    font-size: 12px;
    line-height: 1.8;
    max-width: 320px;
    text-wrap: balance;
  }
  .tl-hero__art { height: clamp(190px, 30svh, 280px); }
  .tl-consult { padding: 14px; }
  .tl-consult textarea { font-size: 16px; }   /* iOS の自動ズームを防ぐ */
  /* 相談カード内の小リンクをタップしやすく */
  .tl-consult-links { gap: 6px 14px; }
  .tl-consult-links a { display: inline-flex; align-items: center; min-height: 40px; }
  .tl-consult button { min-height: 44px; }
  .tl-consult__chips button, .tl-consult .tl-chip { min-height: 36px; }

  /* ---------- 3. 見出し・本文・セクション余白 ---------- */
  /* 明示的な<br>を持つ見出しは balance を使わず、そのままの改行を活かす */
  .tl-pickup__heading h2, .tl-world__header h2, .talent-team__heading,
  .tl-service-pv h2, .tl-world__intro, .tl-pickup__intro, .talent-team__intro {
    text-wrap: balance;
  }
  #talent-about .texts > p { line-height: 1.95; }
  /* 背景が切り替わる境界は少しゆとりを持たせる */
  .intro#talent-about { padding-bottom: 72px; }
  .tl-pickup.tl-pickup--compact { padding-top: 72px; }
  .tl-service-pv.talentland-tv { padding-top: 64px; padding-bottom: 56px; }
  .tl-faq.faq { padding-top: 64px; }
  .tl-more-paper { padding-top: 64px; }

  /* ---------- 4. タレントランドの街（世界図）---------- */
  /* 手書きコピーが地図に重ならないよう、独立した行にする */
  html[lang="ja"] body .tl-world__handwritten {
    margin: 10px 0 0 4% !important;
    font-size: 19px !important;
    line-height: 1.45;
    max-width: 88%;
  }
  /* ピンは地図の点より上に立つため、地図の上に余白を取り手書きコピーと重ねない */
  .tl-world__explorer { margin: 56px 0 0; overflow: visible; }
  /* ピンは顔を小さく・ラベルを1行にして、隣のピンと重ならない高さに収める */
  .tl-world__pin { min-width: 36px; min-height: 36px; }
  .tl-world__pin-face { width: 32px; height: 32px; box-shadow: 2px 2px 0 #1a1a1a; }
  .tl-world__pin-face svg { width: 25px; height: 25px; }
  .tl-world__pin-face .tl-world__nodax-icon { width: 27px; height: 27px; }
  .tl-world__pin-face:after { left: 11px; }
  .tl-world__pin-plus { width: 15px; height: 15px; font-size: 11px; line-height: 13px; right: -3px; top: -3px; }
  .tl-world__pin-label { width: auto; max-width: none; white-space: nowrap; font-size: 8px; line-height: 1.4; padding: 1px 6px; margin-top: 3px; border-radius: 10px; }
  /* 右端のピンだけ内側に寄せてラベルを画面内に */
  .tl-world__pin[data-x="84"], .tl-world__pin[data-x="85"] { transform: translate(-70%, -100%); }
  /* 空を飛ぶドローン：入れ子svgのoverflowが効かず地図が巨大描画される問題は JS で修正 */
  .tl-world__info { margin: 20px 0 0; }
  .tl-world__info-close { min-width: 44px; min-height: 44px; }

  /* ---------- 5. クルーカード（キャラクター紹介）---------- */
  .talent-team__card { flex-basis: min(84vw, 320px); }
  .talent-team__button { width: 48px; height: 48px; }
  .talent-team__controls { gap: 10px; }
  .talent-team__detail { min-height: 48px; padding-top: 10px; }
  .talent-team__catalog { display: inline-flex; align-items: center; min-height: 40px; }

  /* ---------- 6. 動画セクション ---------- */
  .tl-pv-frame { aspect-ratio: 16 / 9; }
  .tl-pv-video { width: 100%; height: 100%; object-fit: contain; }   /* 16:9 を保つ */
  .tl-pv-caption { gap: 12px; align-items: center; }
  .tl-pv-toggle { min-height: 44px; padding: 8px 16px; }
  .tl-pv-service-link { display: inline-flex; align-items: center; min-height: 44px; }

  /* ---------- 7. キャラクター動画スライダー / Contact ---------- */
  /* 既存仕様（停止しない・フェードなし・白文字）は維持。横はみ出しだけ包む */
  .tl-entry-wrap, .footer-recruit_marquee { overflow: hidden; max-width: 100vw; }

  /* ---------- 8. FAQ ---------- */
  /* 左のイラスト：画面外に出さず、質問との並びを保つ */
  .faq.tl-faq .b-illust { left: 0; width: min(44vw, 165px); top: 56px; }
  .faq.tl-faq .b-illust img { width: 100%; height: auto; }
  .faq.tl-faq .tit_area { padding-left: min(46vw, 172px); min-height: 0; margin-bottom: 28px; }
  .tl-faq .tit_area a { min-height: 40px; align-items: center; padding: 4px 0; margin: 0; }
  .tl-faq-item summary { min-height: 60px; padding: 16px 18px; gap: 12px; }
  .tl-faq-plus { width: 18px; height: 18px; }
  .tl-faq-plus:before, .tl-faq-plus:after { width: 18px; top: 8px; }
  .tl-faq-answer { padding-left: 18px; padding-right: 18px; }
  .tl-faq-answer p { overflow-wrap: anywhere; }
  /* 「一覧で表示」「すべて見る」は同じ見た目のまま、タップ領域だけ確保 */
  .tl-faq-all-link, .news .tit_area a { min-height: 44px; align-items: center; }

  /* ---------- 9. MORE CONTENTS ---------- */
  .tl-special-grid { gap: 14px; }
  .tl-special-card { min-height: 104px; }
  .tl-special-photo img { width: 84px; height: 90px; object-fit: cover; }
  /* 代表写真は顔が切れないよう上寄せ */
  .tl-special-card[href*="message"] .tl-special-photo img { object-position: 50% 18%; }
  .tl-special-card--small .tl-special-character { width: 72px; height: 72px; }

  /* ---------- 10. フッター ---------- */
  .footer .c_area a { min-height: 44px; align-items: center; padding: 8px 0; }
  .footer .links_area { padding-bottom: 8px; }
  .footer a.mail { display: inline-block; padding: 15px 4px; }
  .footer .logo a { display: inline-block; padding: 8px 0; }
  .nd-prompt > div button { min-height: 44px; }

  /* ---------- 11. 「ノダックスに相談」 ---------- */
  /* 追従CTAの上に置く（バー高さ＋余白）。本文は body の下余白で逃がす */
  #nodax-guide { right: 12px; bottom: calc(80px + env(safe-area-inset-bottom)); }
  /* 右上の黒丸×：見た目は変えずタップ領域を 44px に広げる */
  #nodax-guide .nd-dismiss { overflow: visible; }
  #nodax-guide .nd-dismiss::after {
    content: ""; position: absolute; inset: -10px; border-radius: 50%;
  }
  /* チャット展開時：ソフトキーボードで隠れないよう dvh 基準、下は安全領域 */
  .nd-open #nodax-guide { right: 12px; left: 12px; bottom: calc(10px + env(safe-area-inset-bottom)); }
  .nd-open #nd-panel {
    width: 100%;
    height: min(600px, calc(100dvh - 24px));
    max-height: calc(100dvh - 24px);
  }
  #nd-panel header { padding: 10px 12px; }
  #nd-panel header img { width: 48px; height: 48px; }
  #nd-panel .nd-close { width: 44px; height: 44px; }
  .nd-form { padding: 0 12px 4px; }
  .nd-form input { font-size: 16px !important; min-height: 48px; }
  .nd-form button { width: 48px; min-height: 48px; }
  .nd-topics button { min-height: 36px; }
}

/* ---------- 小さい端末（320〜360px）---------- */
@media (max-width: 360px) {
  .head.index .logo img { max-width: 160px; }
  .tl-hero__title { font-size: 23px; }
  .tl-hero__lead { font-size: 11px; max-width: none; }
  .tl-follow > a, .tl-follow > a:nth-child(2), .tl-follow > a:nth-child(3) {
    font-size: 10px; padding: 8px 2px; gap: 3px;
  }
  .tl-follow a span, .tl-follow > a .tl-follow-emoji { width: 16px; height: 16px; }
  /* 想いを、まんなかに。：狭い幅では見出しを全幅にして「ま/んなかに」の分断を防ぐ */
  #talent-about .text_area { grid-template-columns: minmax(0, 36%) minmax(0, 1fr); }
  #talent-about #tl-about-title { grid-column: 1 / -1; grid-row: 1; font-size: 21px; padding-left: 7%; margin-bottom: 14px; }
  #talent-about .illust_area { grid-row: 2; }
  #talent-about .texts { grid-row: 2; }
  .tl-pickup__heading h2 { font-size: 24px; }
  .tl-world__header h2 { font-size: 22px; }
  .tl-service-pv h2 { font-size: 27px; }
  .talent-team__heading { font-size: 24px; }
  .tl-world__pin-label { font-size: 7.5px; padding: 1px 4px; }
  html[lang="ja"] body .tl-world__handwritten { font-size: 17px !important; }
  .faq.tl-faq .b-illust { width: 40vw; }
  .faq.tl-faq .tit_area { padding-left: 42vw; }
  .tl-faq .tit_area h2 { font-size: 48px; }
  /* 「介護のお悩み、まるっと解決」を2行に */
  .window-heading .mobile-break { display: inline; }
  .window-heading h2 { font-size: 23px; }
}

/* Let the mobile hero grow with the complete consultation form.
   The imported #kv aspect-ratio sized the flex container before its content,
   shrinking the text column and clipping the lower half of the white card. */
@media (max-width:1000px) {
  body#top #kv.tl-hero {
    height:auto;
    min-height:0;
    max-height:none;
    aspect-ratio:auto;
    display:flex;
    flex-direction:column;
    justify-content:flex-start;
    padding-bottom:64px;
  }
  body#top #kv .tl-hero__content {
    position:relative;
    flex:0 0 auto;
    width:100%;
    max-width:620px;
    height:auto;
    min-height:0;
    max-height:none;
    margin:0 auto;
    padding:0;
    overflow:visible;
  }
  body#top #kv .tl-hero__title {
    position:relative;
    top:auto;
    left:auto;
    width:100%;
    max-width:100%;
    white-space:normal;
    overflow-wrap:anywhere;
  }
  body#top #kv .tl-consult {
    height:auto;
    max-height:none;
    overflow:visible;
  }
  body#top #kv .tl-consult__bottom {flex-wrap:wrap;gap:12px;}
  body#top #kv .tl-consult__submit {flex:none;margin-left:auto;}
}

/* Compact SP hero after removing the decorative Nodax above the form. */
@media (max-width:767px) {
  body#top #kv .tl-consult > .tl-nodax-peek {display:none;}
  body#top #kv .tl-consult {margin-top:26px;}
  body#top #kv .tl-hero__lead {margin-bottom:16px;}
  body#top #kv.tl-hero {gap:10px;padding-bottom:44px;}
}

/* SP: bring the handwritten promise down toward the island. */
@media(max-width:767px){
 html[lang="ja"] body .tl-world__handwritten{transform:translateY(10px) rotate(-7deg) skewX(-5deg)}
 body#top .tl-world__explorer{margin-top:8px}
}

@media(max-width:767px){
 body#top .tl-world__hint{margin-bottom:24px;}
}

/* Keep the About artwork inside its mobile grid column. */
@media(max-width:767px){
 body#top #talent-about .illust_area{width:100%;max-width:100%;margin:24px 0 0;left:0;transform:none;justify-self:stretch}
 body#top #talent-about .illust_area>img{display:block;width:100%;max-width:100%;height:auto;object-fit:contain;object-position:center}
}