/**
 * 案A レスポンシブ（唯一の切替点: 900px / 901px）
 * 本ファイルは各HTMLの </style> 直後に読み込む（インラインCSSより優先）
 * モバイルとPCは別UX — 見た目を揃えない
 */

/* ========== Final CTA 見出しハイライト（全LP共通） ========== */
/* 白文字+下半分マーカーはコントラスト不足のため、黄底+濃色文字のラベル型に統一 */
.final-cta h2 .hl{
  color:#2D3436;
  background:#FFD93D;
  white-space:nowrap;
  padding:.06em .32em .1em;
  border:2px solid #2D3436;
  border-radius:8px;
  box-shadow:2px 2px 0 #2D3436;
  transform:none;
  display:inline;
  vertical-align:baseline;
  text-shadow:none;
  font-weight:900;
  line-height:1.35;
}
@media(max-width:900px){
  .final-cta h2 .hl{
    padding:.08em .28em .12em;
    border-radius:6px;
    box-shadow:2px 2px 0 #2D3436;
  }
}

/* ========== モバイル ≤900px ========== */
@media(max-width:900px){
  /* --- 個別LP FV --- */
  .fv-inner{grid-template-columns:1fr;gap:2rem}
  .fv-text{display:flex;flex-direction:column;align-items:stretch;width:100%}
  .fv-agent-badge{align-self:flex-start;max-width:100%}
  .fv-checks,.fv-cta{width:100%}
  .fv-cta{
    flex-direction:column;
    align-items:stretch;
    gap:.75rem;
    margin-top:.25rem;
  }
  .btn-mega,
  .btn-ghost{
    width:100%;
    max-width:100%;
    min-width:0;
    flex:1 1 auto;
    box-sizing:border-box;
    text-align:center;
  }
  .btn-mega{padding:1rem 1.25rem;font-size:1.0625rem}

  /* --- ヘッダー：1行（エージェント左・CTA右） --- */
  .hdr{padding:.5rem .75rem}
  .hc{flex-wrap:nowrap;align-items:center;gap:.5rem}
  .hdr-agent{min-width:0;flex:1 1 auto;max-width:none}
  .hdr-agent-name,.hdr-badge-name{
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%;
  }
  .hdr-cta{
    margin-left:auto;
    flex:0 0 auto;
    width:auto;
    justify-content:flex-end;
    gap:.35rem;
  }
  /* 3ボタンLPのみ中央の TicketMe Career を非表示 */
  .hdr-cta:has(.hdr-btn:nth-child(3)) .hdr-btn:nth-child(2){display:none}
  /* 2ボタンLPは比較(sub)を隠し無料登録を優先 */
  .hdr-cta .hdr-btn.sub{display:none}
  .hdr-cta .hdr-btn,
  .hdr-cta .hdr-link{
    flex:0 0 auto;
    justify-content:center;
    text-align:center;
    padding:.5rem .7rem;
    font-size:.7rem;
    white-space:nowrap;
    line-height:1.3;
    min-height:40px;
  }

  /* --- 提携外バナー --- */
  .np-notice{padding:.35rem .75rem;font-size:.65rem;line-height:1.45}

  /* --- flow / voice --- */
  .flow-grid{grid-template-columns:1fr;gap:.625rem}
  .flow-step{
    display:flex;
    align-items:flex-start;
    gap:.875rem;
    padding:1rem 1.125rem;
    text-align:left;
  }
  .flow-step::after{display:none}
  .flow-step-num{width:32px;height:32px;font-size:.8125rem;margin:0;flex-shrink:0}
  .flow-step-body{flex:1}
  .voice-grid{grid-template-columns:1fr}

  /* --- sticky --- */
  .sticky-cta{display:block}
  body{padding-bottom:calc(72px + env(safe-area-inset-bottom))}

  /* --- フッター（sticky/fab に隠れない余白） --- */
  footer.ftr,
  .ftr{
    padding:1.25rem 1rem calc(5.5rem + env(safe-area-inset-bottom)) !important;
    text-align:center;
  }
  .ftr-inner{max-width:100%}
  .ftr-bot,
  footer.ftr .ftr-bot,
  .ftr>p,
  .ftr p{
    font-size:.625rem !important;
    line-height:1.65;
    opacity:.88;
  }
  .ftr-bot p{margin-bottom:.35rem}
  .ftr-bot p:last-child{margin-bottom:0}
  .ftr-cta{padding:2rem 1rem 1.5rem}
  .ftr-cta h2{font-size:1.2rem;line-height:1.45}
  .ftr-cta p{font-size:.8125rem;margin-bottom:.875rem}
  .ftr-btns{flex-direction:column;align-items:stretch;gap:.5rem}
  .ftr-btns a,
  .ftr-btns .btn{width:100%;box-sizing:border-box;justify-content:center}
  body:has(.fab){padding-bottom:calc(5rem + env(safe-area-inset-bottom))}

  /* --- 業界別 --- */
  .rank-card{grid-template-columns:80px 1fr;gap:1rem}
  .rank-actions{grid-column:1/-1;flex-direction:row;gap:.5rem}
  .rank-actions .btn-lg{flex:1}
  .guide-grid{grid-template-columns:1fr}
  .quick-inner{grid-template-columns:1fr;text-align:center}

  /* --- 比較表モバイル --- */
  .diff-scroll-hint{display:block}
  .diff-scroll{margin:0 -1rem;padding:0 1rem .5rem;overflow-x:auto;-webkit-overflow-scrolling:touch}
  .diff-table{min-width:532px}

  /* --- compare --- */
  .genre-grid{grid-template-columns:repeat(2,1fr)}
  .pick-cards{grid-template-columns:1fr}
  .fv{padding:2rem 1rem}

  /* --- detail --- */
  .page-detail .layout{display:block}
  .aside{position:static}
  .fab{display:block}
}

/* ========== PC ≥901px — 個別LP ========== */
@media(min-width:901px){
  .fv-inner{grid-template-columns:1.2fr 1fr;gap:3rem;align-items:center}
  .fv-text{display:block;width:auto}
  .fv-cta{
    flex-direction:row;
    align-items:center;
    flex-wrap:wrap;
    gap:.875rem;
    width:100%;
    max-width:32rem;
  }
  .btn-mega{
    width:auto;
    min-width:260px;
    max-width:100%;
    flex:0 0 auto;
    padding:1.25rem 2.25rem;
    font-size:1.125rem;
  }
  .btn-ghost{
    width:auto;
    min-width:200px;
    max-width:100%;
    flex:0 0 auto;
    padding:.875rem 1.5rem;
  }
  .fv-checks{width:auto}

  .hc{flex-wrap:nowrap}
  .hdr-cta{margin-left:auto;width:auto;flex:0 1 auto;justify-content:flex-end}
  .hdr-cta .hdr-btn:nth-child(2){display:inline-flex}
  .hdr-cta .hdr-btn,
  .hdr-cta .hdr-link{
    flex:0 1 auto;
    white-space:nowrap;
    font-size:.8125rem;
    padding:.625rem 1.25rem;
    min-height:44px;
    line-height:1.3;
  }

  .flow-grid{
    grid-template-columns:repeat(5,1fr);
    gap:var(--flow-gap,1rem);
    align-items:stretch;
    overflow:visible;
  }
  .flow-step{
    display:block;
    text-align:center;
    padding:1.5rem 1rem;
    align-items:initial;
    gap:0;
    height:100%;
  }
  .flow-step::after{
    display:grid;
    left:calc(100% + (var(--flow-gap, 1rem) - 32px) / 2);
    right:auto;
    top:50%;
    transform:translateY(-50%);
  }
  .flow-step:last-child::after{display:none}
  .flow-step-num{margin:0 auto .625rem}
  .flow-step-body{flex:none}

  .voice-grid{grid-template-columns:repeat(3,1fr);gap:1.5rem;align-items:stretch}
  .voice-card{height:100%}
  .empathy-grid{grid-template-columns:repeat(2,1fr)}

  /* 比較表 PC：全幅・スクロール不要 */
  .diff-scroll-hint{display:none !important}
  .diff-scroll{overflow:visible;margin:0;padding:0}
  .diff-table{width:100%;min-width:0;max-width:100%}
  .diff-head,
  .diff-row{
    grid-template-columns:minmax(130px,1.1fr) minmax(200px,1.5fr) minmax(110px,1fr) minmax(110px,1fr);
  }
  .diff-head-cell.featured,
  .diff-row .diff-cell:nth-child(2){min-width:0}

  /* 3つの強み PC：横3列で縦長を解消 */
  .str-list{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:1.25rem;
  }
  .str-row{
    grid-template-columns:1fr;
    gap:1rem;
    padding:1.5rem 1.25rem;
    height:100%;
  }
  .str-num{width:72px;height:72px;font-size:2rem;margin:0 auto 1rem}
  .str-body{text-align:left}
  .jobs-grid{grid-template-columns:repeat(2,1fr)}
  .metrics-grid{grid-template-columns:repeat(4,1fr)}
  .coverage-grid{grid-template-columns:repeat(3,1fr)}
  .employ-grid{grid-template-columns:repeat(4,1fr)}

  .final-btn{width:auto;min-width:300px;max-width:100%}
  .sticky-cta{display:none}
  body{padding-bottom:0}

  /* --- フッター PC --- */
  .hdr{padding:.875rem 2rem}
  footer.ftr,
  .ftr{padding:2.5rem 2rem !important}
  .ftr-inner{max-width:800px;margin:0 auto}
  .ftr-bot,
  .ftr>p,
  .ftr p{font-size:.75rem !important;line-height:1.75;opacity:.8}
  .ftr-cta{padding:3rem 2rem}
  .ftr-cta h2{font-size:1.75rem}
  .ftr-btns{flex-direction:row;flex-wrap:wrap;justify-content:center}
  .fab{display:none !important}

  /* 業界別 */
  .rank-card{grid-template-columns:140px 1fr 240px}
  .rank-actions{flex-direction:column;grid-column:auto}
  .rank-actions .btn-lg{width:100%}
  .guide-grid{grid-template-columns:repeat(3,1fr)}
  .quick-inner{grid-template-columns:auto 1fr;text-align:left}

  /* compare */
  .genre-grid{grid-template-columns:repeat(3,1fr)}
  .pick-cards{grid-template-columns:repeat(2,1fr)}
  #agent-grid-tok,#agent-grid-sou{
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(260px,1fr));
    gap:1rem;
  }
  .fv-cta{
    flex-direction:row;
    justify-content:center;
    align-items:center;
    flex-wrap:wrap;
    max-width:none;
    gap:.875rem;
  }
  .fv-cta .btn-mega,
  .fv-cta .btn-ghost{
    width:auto;
    min-width:260px;
    max-width:100%;
    flex:0 0 auto;
  }
  .fv{padding:3rem 2rem 2.5rem}

  /* detail */
  .page-detail .layout{display:grid;grid-template-columns:1fr 320px;gap:2rem}
  .page-detail .aside{position:sticky;top:5rem}
  .page-detail .fab{display:none}

  /* compare — agent LP / detail 用ルールの影響を遮断 */
  .page-compare .fv-inner{
    display:block !important;
    grid-template-columns:unset !important;
    gap:unset !important;
    align-items:unset !important;
    text-align:center;
  }
  .page-compare .layout{display:block !important;max-width:1180px}
  .page-compare .mc-scroll{overflow:visible;margin:0;padding:0}
  .page-compare .mc-wrap{min-width:0;width:100%}
  .page-compare .mc-head,
  .page-compare .mc-row{grid-template-columns:minmax(120px,1.1fr) repeat(4,minmax(0,1fr))}
  .page-compare .mc-head-cell,
  .page-compare .mc-cell{font-size:.8125rem}
  .page-compare .genre-grid{grid-template-columns:repeat(3,1fr);gap:.75rem}
  .page-compare .genre-btn{min-height:76px}
  .page-compare .agent-grid{grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:1rem}
  .page-compare .fv-cta{justify-content:center;max-width:none}
  .page-compare .hdr{padding:.875rem 2rem}
  .page-compare .hc{flex-wrap:nowrap}
  .page-compare .hdr-cta .hdr-btn:nth-child(2){display:inline-flex}
}