/* ============================================================
   スマホ優先の作り込み（2026-08-26）

   ★方針★
   ユーザー（相談する人）と専門家は、ほぼスマホで見ます。
   本部・営業・契約・KPI の管理画面だけ、PCで見る前提です。

   ここは「スマホでだけ変わること」を1か所に集めたファイルです。
   PCの見た目は、このファイルを外しても変わりません。
   触るのが怖いときは、読み込みの1行を消せば元に戻せます。

   ★測っている幅★
   360px  … いちばん狭い端末（折りたたみの外側画面、小型Android）
   390px  … いちばん多い端末（iPhone）
   要件 QA-005 の 360 / 390-430 / 768 / 1024 / 1280-1440+ に合わせています。

   ★スマホで起きる、PCでは起きない問題★
   ① 縦に一列になるので、ページがとても長くなる
      → 専門家詳細LPは 360px で 16.8画面ありました
   ② 長いので、ボタンまで戻るのが大変
      → 画面の下に相談ボタンを貼りつけます（要件 PG-003 の「固定CTA」）
   ③ 指で押すので、小さいものが押せない
      → 44px。これは assets/base.css の側で入れています
   ============================================================ */

/* ============================================================
   1. 画面の下に貼りつく相談ボタン（固定CTA）

   ★なぜ必要か★
   専門家詳細LPは、スマホで16画面ぶんあります。
   途中で「相談したい」と思っても、ボタンは画面のずっと下です。
   親指の届くところに、いつでもボタンがある状態にします。

   ★重ならないようにすること★（要件 PG-003）
   ・フッターや本物のCTAブロックと重なってはいけません
     → JavaScript（assets/mobile.js）が、それらが見えたら引っ込めます
   ・本文の最後がバーの下に隠れてはいけません
     → body の下に、バーのぶんだけ余白を足します
   ============================================================ */
.cta-fix{
  position:fixed; left:0; right:0; bottom:0; z-index:70;
  display:none;                       /* PCでは出しません */
  gap:10px; padding:10px 14px calc(10px + env(safe-area-inset-bottom));
  background:rgba(255,255,255,.97);
  border-top:1px solid var(--line);
  box-shadow:0 -6px 20px rgba(20,30,25,.10);
  transform:translateY(110%);
  transition:transform .22s ease;
}
.cta-fix.on{transform:translateY(0)}
.cta-fix .btn{flex:1; min-height:50px; font-size:16px; padding-inline:14px}
.cta-fix .btn--quiet{flex:0 0 auto; min-width:104px}

@media (max-width:767px){
  .cta-fix{display:flex}
  /* バーの高さぶん、ページの下に余白を作ります。
     これがないと、フッターの最後の行がバーに隠れます。 */
  body.has-cta-fix{padding-bottom:78px}
}

/* 動きを減らす設定の人には、すべり込みを出しません */
@media (prefers-reduced-motion: reduce){
  .cta-fix{transition:none}
}

/* ============================================================
   2. 長いリストは「もっと見る」で畳む

   ★大事なこと★
   畳んでも、中身は HTML に残したままにします。
   消してしまうと検索エンジンから見えなくなり、
   このサイトの目的（グループの検索評価を上げる）に反します。
   見せないだけで、書いてはある、という状態にします。
   ============================================================ */
.fold-more{display:none}

@media (max-width:767px){
  /* 畳んだとき、あふれる分を隠します */
  .foldable[data-folded="1"]{
    max-height:var(--fold-h,860px);
    overflow:hidden;
    position:relative;
    /* 下を薄くして「まだ続きがある」と分かるようにします */
    mask-image:linear-gradient(#000 calc(100% - 90px), transparent);
    -webkit-mask-image:linear-gradient(#000 calc(100% - 90px), transparent);
  }
  .fold-more{
    display:flex; align-items:center; justify-content:center; gap:8px;
    width:100%; min-height:48px; margin-top:14px;
    background:#fff; border:1px solid var(--line-strong);
    border-radius:var(--radius-pill);
    font:inherit; font-size:14.5px; font-weight:700; color:var(--brand-ink);
    cursor:pointer;
  }
  .fold-more::after{content:"▾"; font-size:12px}
  .fold-more[aria-expanded="true"]::after{content:"▴"}
}

/* ============================================================
   3. 余白を詰める

   セクションの上下は、PCで88px、900px以下で56pxにしています。
   スマホではもう一段詰めます。
   11個のセクションがあるので、片側12pxで 264px（0.3画面）縮みます。
   詰めすぎると読みにくくなるので、ここまでにします。
   ============================================================ */
/* ★詰めすぎていました★
   縦を短くしたくて 44px にしていましたが、
   セクションの境目が分からないほど窮屈になっていました。
   読みやすさの目安は 64px です。
   縦は 0.5画面ぶん増えますが、
   目次と折りたたみと固定CTAがあるので、そちらで取り返せます。 */
@media (max-width:430px){
  :root{ --sec-y:64px; --gutter:16px; --card-p:18px; }
}

/* ============================================================
   4. ヒーローを1画面に収める

   360px で 1,254px（1.6画面）ありました。
   顔写真が大きすぎるのが原因です。
   スマホでは、写真と名前を横に並べます。
   ============================================================ */
@media (max-width:767px){
  .b-hero-expert .inner{gap:18px; padding-block:6px 30px}
  .b-hero-expert .photo{
    max-width:132px;
    float:left; margin:0 16px 10px 0;
  }
  .b-hero-expert .photo img{aspect-ratio:1/1}
  .b-hero-expert .desc{clear:both; margin-top:14px; font-size:16px; line-height:1.95}
  .b-hero-expert .name b{font-size:26px}
  .b-hero-expert .meta{margin-top:16px}
  .b-hero-expert .meta .k{width:76px; font-size:13.5px}
}

/* ============================================================
   5. 表は横に動かせると分かる形にする

   スマホでは表が入りきりません。横スクロールでよいのですが、
   「動かせる」と分からないと、切れていることに気づきません。
   ============================================================ */
/* ★横に動かせる枠は、幅を問わず効かせます★
   はじめ、この指定を「767px以下のとき」の中に入れていました。
   そのため 768px と 1024px では overflow-x が付いておらず、
   本部の管理画面（表が 780px あります）が
   ページごと横にはみ出していました。
   要件 UI-002 は「横スクロール禁止。ただし表はラベル付き内部スクロール可」。
   ページは動かさず、表の中だけを動かします。 */
.scroll-x{ overflow-x:auto; -webkit-overflow-scrolling:touch; }

@media (max-width:767px){
  .scroll-x{
    overflow-x:auto; -webkit-overflow-scrolling:touch;
    background:
      linear-gradient(90deg, #fff 30%, rgba(255,255,255,0)) left / 24px 100% no-repeat,
      linear-gradient(90deg, rgba(255,255,255,0), #fff 70%) right / 24px 100% no-repeat,
      radial-gradient(farthest-side at 0 50%, rgba(15,25,20,.13), transparent) left / 9px 100% no-repeat,
      radial-gradient(farthest-side at 100% 50%, rgba(15,25,20,.13), transparent) right / 9px 100% no-repeat;
    background-attachment:local, local, scroll, scroll;
  }
}

/* ============================================================
   6. 事例カードを詰める

   ★事例は畳みません★
   このサイトの入口は「相談・解決事例」です（要件 PG-001）。
   件数を減らすのではなく、1枚を薄くします。

   360px では、1枚が 950px（1.2画面）ありました。
   「相談内容 / 確認したこと / 判断・対応」の3つが縦に並び、
   それぞれに見出しと下線が付いているためです。
   ============================================================ */
@media (max-width:767px){
  .b-case-cards .item{padding:18px; gap:16px}
  .b-case-cards .cols{gap:12px}
  .b-case-cards .col h5{padding-bottom:5px; font-size:13px}
  .b-case-cards .col li{padding-block:3px; line-height:1.75}
  .b-case-cards .lft h4{font-size:16px; line-height:1.65}
  .b-case-cards .lft p{margin-top:8px; line-height:1.8}
  .b-case-cards .lft .tags{margin-bottom:9px}
  .b-case-cards .item .btn{width:100%}
}

/* ============================================================
   7. 利用者の声を詰める
   丸い顔アイコンが76pxあり、その横の文が細くなっていました。
   スマホでは名前の行に小さく置きます。
   ============================================================ */
@media (max-width:767px){
  .b-voices .item{grid-template-columns:44px 1fr; gap:12px; padding:17px}
  .b-voices .av{width:44px; height:44px}
  .b-voices p{line-height:1.85}
}

/* ============================================================
   8. インタビューの誘い枠
   写真の最低の高さが 280px あり、スマホでは大きすぎました。
   ============================================================ */
@media (max-width:767px){
  .b-interview-teaser .box{grid-template-columns:1fr}
  .b-interview-teaser img{min-height:180px; max-height:210px}
}

/* ============================================================
   9. フッターを畳む

   どのページにも 1,067px（1.4画面）のフッターが付いていました。
   40ページ全部に乗っているので、ここを詰めるといちばん効きます。

   ★リンクは消しません★
   高さを0にして見えなくしているだけで、HTML には残っています。
   ============================================================ */
@media (max-width:767px){
  .footer-grid{gap:0}
  .site-footer{padding-block:36px 0}

  .foot-toggle{
    display:flex; align-items:center; justify-content:space-between;
    min-height:48px; margin:0; cursor:pointer;
    border-top:1px solid rgba(255,255,255,.18);
  }
  .footer-col:first-of-type .foot-toggle{border-top:none}
  .foot-toggle::after{
    content:"+"; font-size:19px; font-weight:400; line-height:1;
    opacity:.75; transition:transform .18s ease;
  }
  .foot-toggle[aria-expanded="true"]::after{content:"−"}
  .foot-toggle:focus-visible{outline:2px solid #fff; outline-offset:2px}

  .foot-list{overflow:hidden; max-height:0; transition:max-height .22s ease}
  .foot-list[data-open="1"]{max-height:420px; padding-bottom:10px}

  .footer-brand{padding-bottom:20px}
  .footer-bottom{margin-top:26px}
}

@media (prefers-reduced-motion: reduce){
  .foot-list{transition:none}
}

/* ============================================================
   10. 長い読み物の目次

   事例詳細は見出しが12個あり、上から読むしかありませんでした。
   内容は削らず、跳べるようにします。
   ============================================================ */
.m-toc{display:none}

@media (max-width:767px){
  .m-toc{
    display:block; margin:0 var(--gutter) 4px;
    background:var(--cream); border:1px solid var(--line);
    border-radius:var(--radius); overflow:hidden;
  }
  .m-toc-head{
    display:flex; align-items:center; justify-content:space-between;
    width:100%; min-height:50px; padding:0 16px;
    background:none; border:none; font:inherit; font-size:14.5px; font-weight:700;
    color:var(--ink-strong); text-align:left; cursor:pointer;
  }
  .m-toc-head::after{content:"▾"; font-size:12px; color:var(--brand)}
  .m-toc-head[aria-expanded="true"]::after{content:"▴"}

  .m-toc-list{
    list-style:none; margin:0; padding:0;
    max-height:0; overflow:hidden; transition:max-height .24s ease;
  }
  .m-toc-list[data-open="1"]{max-height:760px; overflow-y:auto; padding:2px 0 10px}
  .m-toc-list li{counter-increment:toc}
  .m-toc-list a{
    display:flex; gap:10px; align-items:baseline;
    min-height:44px; padding:9px 16px;
    font-size:14px; line-height:1.65; color:var(--ink);
    border-top:1px solid var(--line);
  }
  .m-toc-list a::before{
    content:counter(toc); flex:none; width:17px;
    font-family:var(--display-font); font-size:13px; color:var(--brand); font-weight:700;
  }
  .m-toc-list{counter-reset:toc}
}

@media (prefers-reduced-motion: reduce){
  .m-toc-list{transition:none}
}

/* 目次から跳んだとき、見出しがヘッダーの下に潜らないようにします。
   拾う見出しは h2 とはかぎらない（インタビューは h3）ので、
   目次が付けた id を持つ見出しをまとめて対象にします。 */
@media (max-width:767px){
  h2[id^="midashi-"], h3[id^="midashi-"], h4[id^="midashi-"]{scroll-margin-top:70px}
}

/* ============================================================
   11. 320px で使えなくなっていたところ（2026-08-27）

   01-20 の UI-002 で、いちばん狭い幅が 320px になりました。
   これまで 360px までしか見ていなかったので、
   320px にすると使えなくなる場所が3つ出ました。
   ============================================================ */

/* ---- TOP の事例検索 ----
   入力欄・アイコン・ボタンを横一列にしていたため、
   320px では入力欄の幅が 8px しか残っていませんでした。
   縦に積みます。 */
@media (max-width:600px){
  .b-ai-search .searchbar{
    flex-wrap:wrap; border-radius:var(--radius);
    padding:14px 16px; gap:10px;
  }
  .b-ai-search .searchbar > svg{display:none}
  .b-ai-search input{
    flex:1 0 100%; min-width:0; min-height:44px;
    padding:10px 0; border-bottom:1px solid var(--line);
  }
  .b-ai-search .searchbar .btn{width:100%}
}

/* ---- 絞り込みの「解除」ボタン ----
   高さが 32px しかありませんでした。 */
@media (max-width:767px){
  .cs-clear{min-height:44px; padding-inline:12px}
}

/* ---- 「オンライン対応のみ」のチェック ----
   ラベルごと押せますが、高さが 24px しかありませんでした。 */
@media (max-width:767px){
  .cs-check{min-height:44px; display:flex; align-items:center; gap:10px}
}

/* ============================================================
   12. スマホのメニュー（01-20 UI-005 / PAGE-TOP-001 Mobile）

   ★これまで、狭い画面ではナビを消していただけでした★
   消すのは簡単ですが、代わりを置かないと
   スマホでどこへも行けなくなります。
   ============================================================ */

/* 開くボタン。1000px 以下で出します（.gnav を隠す幅と同じ） */
.mn-btn { display: none; }

@media (max-width: 1000px) {
  .mn-btn {
    display: inline-flex; align-items: center; gap: 8px;
    margin-left: auto; padding: 9px 13px; min-height: 44px;
    background: none; border: 1px solid var(--line-strong);
    border-radius: var(--radius-pill);
    font: inherit; font-size:13px; font-weight: 700;
    color: var(--ink-strong); cursor: pointer;
  }
  .mn-btn:hover { border-color: var(--brand); color: var(--brand-ink); }
  .mn-btn:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
  .mn-btn .bars { display: grid; gap: 4px; width: 17px; }
  .mn-btn .bars i {
    display: block; height: 1.8px; background: var(--ink-strong);
    border-radius: 2px; transition: transform .18s ease, opacity .18s ease;
  }
  .mn-btn[aria-expanded="true"] .bars i:nth-child(1) { transform: translateY(5.8px) rotate(45deg); }
  .mn-btn[aria-expanded="true"] .bars i:nth-child(2) { opacity: 0; }
  .mn-btn[aria-expanded="true"] .bars i:nth-child(3) { transform: translateY(-5.8px) rotate(-45deg); }

  /* ★ヘッダーの相談ボタンは、メニューの中に入れません★
     JSが動かなかったときに、相談する道が消えてしまうためです。
     いちばん狭いときだけ、文字を短くして残します。 */
  .site-header .header-cta .btn { padding-inline: 14px; font-size:13px; }
}

@media (max-width: 400px) {
  /* いちばん狭いときは文字を省いて三本線だけにします。
     ただし ★幅も 44px 以上★ 確保します。
     高さだけ 44px にしても、横が 41px では指で押せません。 */
  .mn-btn .tx { display: none; }
  .mn-btn { padding: 9px 12px; min-width: 44px; justify-content: center; }
}

/* 後ろの幕 */
.mn-back {
  position: fixed; inset: 0; z-index: 45;
  background: rgba(15, 25, 20, .42);
  opacity: 0; transition: opacity .2s ease;
}
.mn-back.on { opacity: 1; }

/* メニューの中身 */
.mn-panel {
  position: absolute; left: 0; right: 0; top: 100%;
  z-index: 46; background: #fff;
  border-bottom: 1px solid var(--line);
  box-shadow: 0 14px 34px rgba(20, 30, 25, .14);
  /* ★iPhone では 100vh が「URLバーを含んだ高さ」になります★
     そのため 100vh で作ると、メニューの下のほうが
     URLバーの裏に隠れて押せなくなります。
     dvh（いま実際に見えている高さ）を使い、
     対応していない端末のために 100vh も残します。 */
  max-height: calc(100vh - 60px);
  max-height: calc(100dvh - 60px);
  overflow-y: auto;
  transform: translateY(-10px); opacity: 0;
  transition: transform .2s ease, opacity .2s ease;
}
.mn-panel.on { transform: translateY(0); opacity: 1; }
.mn-in { padding: 18px var(--gutter) 26px; }

.mn-g { margin-bottom: 18px; }
.mn-g:last-of-type { margin-bottom: 0; }
.mn-h {
  display: block; margin-bottom: 4px; padding-bottom: 7px;
  border-bottom: 1px solid var(--line);
  font-size: 12px; font-weight: 700; letter-spacing: .06em; color: var(--muted);
}
.mn-panel a {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  min-height: 48px; padding: 12px 2px;
  font-size:16px; font-weight: 600; color: var(--ink-strong);
  border-bottom: 1px solid var(--line);
}
.mn-panel a:last-child { border-bottom: none; }
.mn-panel a:hover { color: var(--brand); }
.mn-panel a svg { flex: none; color: var(--brand); opacity: .55; }

.mn-cta { margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--line); }
.mn-cta .btn { width: 100%; }

/* 開いている間は、後ろを動かしません */
body.mn-open { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  .mn-back, .mn-panel, .mn-btn .bars i { transition: none; }
}

/* ============================================================
   13. 実機（iPhone / Android）で効いてくるもの
   ============================================================ */

/* ---- 押したときの青い箱を消します ----
   iOS と Android は、リンクを押した瞬間に青い四角を出します。
   角丸のボタンでも四角く光るので、作りが安っぽく見えます。
   押したことは、自前の色の変化で伝えます。 */
a, button, [role="button"], label, summary {
  -webkit-tap-highlight-color: rgba(31, 74, 56, .12);
}

/* ---- 長押しで文字が選択されるのを防ぎます（ボタンだけ） ----
   ボタンを長押しすると文字が選択され、
   コピーのふきだしが出てしまいます。 */
.btn, .mn-btn, .dg-c, .rv-chip, .fold-more, .foot-toggle, .ad-b {
  -webkit-user-select: none; user-select: none;
}

/* ---- 横向きにしたとき ----
   スマホを横にすると高さが 390px 前後になります。
   下に貼りついた相談ボタンが画面の3分の1を占めると、
   本文がほとんど読めません。小さくします。 */
@media (max-width: 926px) and (orientation: landscape) {
  .cta-fix { padding: 7px 12px calc(7px + env(safe-area-inset-bottom)); }
  .cta-fix .btn { min-height: 40px; font-size:14px; }
  body.has-cta-fix { padding-bottom: 62px; }
  .mn-panel { max-height: calc(100vh - 52px); max-height: calc(100dvh - 52px); }
}

/* ---- 文字を大きくしている人（設定で200%まで） ----
   要件 UI-001「文字拡大200%でも利用可」。
   固定の高さを持つものは、中身があふれます。 */
@media (max-width: 767px) {
  .btn, .mn-btn, .dg-c { height: auto; }
  .site-header .inner { height: auto; min-height: 60px; padding-block: 8px; }
}

/* ---- 端末の左右の切り欠き（ノッチ）----
   横向きにしたとき、切り欠きの下に文字が入り込みます。 */
@supports (padding: max(0px)) {
  .wrap, .wrap-narrow, .cta-fix, .mn-in {
    padding-left: max(var(--gutter), env(safe-area-inset-left));
    padding-right: max(var(--gutter), env(safe-area-inset-right));
  }
}

/* ============================================================
   長い説明文は、スマホでは左揃えにします（2026-08-30）

   ★なぜ★
   中央揃えは、行の始まる位置が1行ごとにずれます。
   1〜2行なら気になりませんが、スマホは1行が20文字ほどしかないので、
   80文字の文は4行になります。
   目が毎行「どこから読むか」を探すことになり、読み飛ばされます。

   見出しの下の1行は中央のままにしています。
   ここは「読ませる文」ではなく「見出しの補足」なので、
   中央のほうが収まりがよいためです。

   PCでは1行が40文字入るので、同じ文でも2行に収まります。
   だから中央揃えのままにしています。
   ============================================================ */
@media (max-width: 767px) {
  .h-sec-lead,
  .rv-done .hint,
  .note.center,
  .fe-cta p,
  .fe-cta .fine,
  .wrap-narrow > p {
    text-align: left;
  }
  /* 左揃えにすると、中央寄せの見た目が崩れるので、幅は中央に置きます */
  .h-sec-lead { margin-left: auto; margin-right: auto; }
}


/* ============================================================
   いちばん狭い画面（320px）の見出し（2026-08-30）

   iPhone SE などの 320px で測ったところ、
   TOPの見出しが「実際の相談事例と／いう／判断材料を。」と
   3文字だけの行ができていました。
   幅に対して文字が大きすぎるためです。

   320〜359px のときだけ、少し小さくします。
   360px以上（いまのスマホのほとんど）はそのままです。
   ============================================================ */
@media (max-width: 359px) {
  /* TOPの大見出し。clamp の下限が30pxで、320pxには大きすぎました。 */
  .b-top-hero h1 { font-size: 25px; line-height: 1.55; }
  .b-hero-expert .name b,
  .b-hero-expert--wide .name b { font-size: 25px; }
  .b-iv-hero h1, .b-case-hero h1 { font-size: 21px; }
  .h-sec { font-size: 21px; }
  .cs-head h1 { font-size: 23px; }
  /* 左に緑の棒がつく見出し。棒と余白のぶん、本文より幅が狭くなります。
     320pxでは「相談前の状況・／背景」のように割れていました。 */
  .h-bar { font-size: 18px; gap: 9px; }
}