/* ==========================================================================
   スマホ表示の共通補正（全ページで読み込む）
   - 各ページはPC基準で作られているため、767px以下（一部900px以下）だけを補正する
   - Tailwind CDN版のページは実行時に<style>が後から差し込まれるため、!important で上書きする
   ========================================================================== */

/* ---- 全ページ共通：横スクロールの防止（stickyを壊さない clip を使う） ---- */
html, body { overflow-x: clip; }

/* ---- スマホ用メニュー（assets/js/sp-nav.js が生成） ---- */
.sp-nav-btn { display: none; }
@media (max-width: 900px) {
  [data-sp-hide] { display: none !important; }
  .sp-nav-btn {
    display: inline-flex; flex: none; align-items: center; justify-content: center;
    width: 44px; height: 44px; margin-left: 8px; padding: 0; border: 0; border-radius: 10px;
    background: transparent; color: #0d2c58; cursor: pointer; -webkit-tap-highlight-color: transparent;
  }
  /* ヘッダーの「お問い合わせ」：メニューボタンと並ぶので小さく1行に */
  [data-sp-cta] { white-space: nowrap !important; font-size: 13px !important; padding: 9px 16px !important; min-height: 0 !important; height: auto !important; width: auto !important; letter-spacing: .04em !important; }
  .sp-nav-btn:focus-visible { outline: 2px solid #054cae; outline-offset: 2px; }
  .sp-nav-btn span, .sp-nav-btn span::before, .sp-nav-btn span::after {
    content: ""; display: block; width: 22px; height: 2px; border-radius: 2px; background: currentColor; position: relative; transition: transform .2s, background .2s;
  }
  .sp-nav-btn span::before { position: absolute; top: -7px; }
  .sp-nav-btn span::after { position: absolute; top: 7px; }
  .sp-nav-open .sp-nav-btn span { background: transparent; }
  .sp-nav-open .sp-nav-btn span::before { transform: translateY(7px) rotate(45deg); }
  .sp-nav-open .sp-nav-btn span::after { transform: translateY(-7px) rotate(-45deg); }
}
.sp-nav-drawer {
  position: fixed; inset: 0; z-index: 9999; display: none;
  background: rgba(7, 25, 54, .45);
}
.sp-nav-open .sp-nav-drawer { display: block; }
.sp-nav-panel {
  position: absolute; top: 0; right: 0; bottom: 0; width: min(86vw, 340px); overflow-y: auto;
  background: #fff; padding: 20px 22px 32px; box-shadow: -12px 0 40px rgba(7, 25, 54, .2);
  font-family: "Zen Kaku Gothic New", "Noto Sans JP", "Hiragino Sans", sans-serif; color: #1f2326;
}
.sp-nav-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.sp-nav-head img { height: 34px; width: auto; }
.sp-nav-close { width: 44px; height: 44px; border: 0; background: transparent; font-size: 28px; line-height: 1; color: #0d2c58; cursor: pointer; }
.sp-nav-panel a { color: inherit; text-decoration: none; }
.sp-nav-list { list-style: none; margin: 0; padding: 0; }
.sp-nav-list > li > a { display: flex; align-items: center; justify-content: space-between; min-height: 52px; font-size: 16px; font-weight: 700; letter-spacing: .04em; border-bottom: 1px solid #e6ebf2; }
.sp-nav-list > li > a::after { content: "›"; color: #054cae; font-size: 20px; font-weight: 400; }
.sp-nav-sub-title { margin: 22px 0 6px; font-size: 12px; font-weight: 700; letter-spacing: .1em; color: #6b7785; }
.sp-nav-sub { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; }
.sp-nav-sub a { display: flex; align-items: center; min-height: 44px; font-size: 14px; border-bottom: 1px solid #eef2f6; }
.sp-nav-ctas { display: grid; gap: 10px; margin-top: 26px; }
.sp-nav-ctas a { display: flex; align-items: center; justify-content: center; min-height: 50px; border-radius: 999px; font-size: 15px; font-weight: 700; letter-spacing: .04em; }
.sp-nav-ctas .is-primary { background: #054cae; color: #fff; }
.sp-nav-ctas .is-outline { border: 1.5px solid #054cae; color: #054cae; }
.sp-nav-open { overflow: hidden; }

/* ==========================================================================
   Tailwind版サービスLP（body.sp-svc）
   ========================================================================== */
@media (max-width: 767px) {
  /* 文字サイズ：PC用の固定値をスマホ向けに一段下げる */
  .sp-svc h1 { font-size: 27px !important; line-height: 1.45 !important; letter-spacing: .01em !important; }
  .sp-svc .text-\[40px\] { font-size: 32px !important; }
  .sp-svc .text-\[33px\] { font-size: 28px !important; }
  .sp-svc .text-\[32px\] { font-size: 23px !important; }
  .sp-svc .text-\[30px\] { font-size: 22px !important; }
  .sp-svc .text-\[26px\] { font-size: 20px !important; }
  .sp-svc .text-\[24px\] { font-size: 18px !important; }
  .sp-svc .text-\[22px\] { font-size: 18px !important; }
  .sp-svc .text-\[20px\] { font-size: 17px !important; }
  .sp-svc .text-\[19px\], .sp-svc .text-\[18px\], .sp-svc .text-\[17px\] { font-size: 16px !important; }
  .sp-svc .text-\[16px\] { font-size: 15px !important; }
  .sp-svc .text-\[15px\] { font-size: 14px !important; }
  .sp-svc h2 br { display: none; }

  /* セクションの余白を詰める */
  .sp-svc .py-24 { padding-top: 60px !important; padding-bottom: 60px !important; }
  .sp-svc .pt-24 { padding-top: 60px !important; }
  .sp-svc .py-20 { padding-top: 48px !important; padding-bottom: 48px !important; }
  .sp-svc .mb-14 { margin-bottom: 32px !important; }
  .sp-svc .px-6 { padding-left: 20px !important; padding-right: 20px !important; }

  /* FV：背景の装飾ロゴを薄く・小さく、成果物イメージを小さく表示、ボタンは横幅いっぱい */
  .sp-svc .hero-grad > img.absolute { opacity: .12 !important; width: 220px !important; }
  .sp-svc .hero-grad .min-h-\[620px\] { min-height: 0 !important; padding-top: 36px !important; padding-bottom: 28px !important; }
  .sp-svc .hero-grad .grid > .relative.hidden { display: block !important; height: auto !important; margin-top: 4px; }
  .sp-svc .hero-grad .grid > .relative.hidden > .absolute { position: relative !important; inset: auto !important; top: auto !important; right: auto !important; width: 100% !important; height: auto !important; aspect-ratio: 16 / 10; border-width: 4px !important; }
  .sp-svc .hero-grad .grid > .relative.hidden > img.absolute { aspect-ratio: auto; max-height: 220px; object-position: center !important; }
  .sp-svc .hero-grad .grid > .relative.hidden > img:not(.absolute) { max-height: 220px; margin-inline: auto; }
  .sp-svc .hero-grad .flex.flex-wrap.gap-4 { flex-direction: column; gap: 12px !important; margin-top: 28px !important; }
  .sp-svc .hero-grad .flex.flex-wrap.gap-4 > a { justify-content: center; padding: 15px 20px !important; }
  .sp-svc .hero-grad .rounded-md.px-6.py-4.flex.flex-wrap { display: grid !important; grid-template-columns: 1fr 1fr; gap: 10px 12px !important; justify-items: start; padding: 14px 16px !important; }
  .sp-svc .hero-grad .rounded-md.px-6.py-4.flex.flex-wrap > span { font-size: 13px !important; gap: 6px !important; letter-spacing: .02em !important; }
  .sp-svc .hero-grad .rounded-md.px-6.py-4.flex.flex-wrap img { width: 20px !important; height: 20px !important; }

  /* 強み・実績カード：アイコン横並びで本文が細くなるため、縦積みにする */
  .sp-svc .bg-card.rounded-md.p-8.flex.items-center.gap-6 { flex-direction: column; text-align: center; gap: 12px !important; padding: 26px 20px !important; }
  .sp-svc .bg-card.rounded-md.p-8.flex.items-center.gap-6 > img.shrink-0,
  .sp-svc .bg-card.rounded-md.p-8.flex.items-center.gap-6 > .shrink-0 { width: 92px !important; height: 92px !important; }
  .sp-svc .bg-card.rounded-md.p-8.flex.items-center.gap-6 .flex.items-end { justify-content: center; }
  .sp-svc .bg-card.rounded-md.p-8.flex.items-center.gap-6 .border-l-2 { text-align: left; }
  .sp-svc .bg-card.rounded-md.p-8.flex.items-center.gap-6 br { display: none; }

  /* 支援実績カード（コンサル等）：画像を上に */
  .sp-svc article .flex.gap-5 { flex-direction: column; gap: 14px !important; }
  .sp-svc article .flex.gap-5 > img.shrink-0 { width: 100% !important; height: 150px !important; }
  .sp-svc article h3 { font-size: 18px !important; }

  /* BPaaSの円図：400px固定のため縮小して収める */
  .sp-svc .relative.w-\[400px\].h-\[400px\] { zoom: .78; }

  /* 成果物（OUTPUT）の画像：横長の画面キャプチャを切らずに全体表示 */
  .sp-svc .h-\[300px\].rounded-lg.overflow-hidden { height: auto !important; }
  .sp-svc .h-\[300px\].rounded-lg.overflow-hidden > img { height: auto !important; object-fit: contain !important; }
  .sp-svc .bg-white.rounded-lg.shadow-sm.p-8 { padding: 22px 20px !important; }

  /* 資料DLバナー・CTA帯：アイコン横並びをやめ、ボタンは横幅いっぱい */
  .sp-svc .rounded-2xl .flex.items-center.gap-5 { flex-direction: column; text-align: center; gap: 14px !important; }
  .sp-svc .rounded-2xl .flex.items-center.gap-5 br { display: none; }
  .sp-svc .rounded-2xl.px-8.py-8, .sp-svc .rounded-2xl.px-10.py-12 { padding: 28px 20px !important; }
  .sp-svc .cta-grad { padding: 36px 22px !important; }
  .sp-svc .cta-grad > img.absolute { width: 200px !important; }
  .sp-svc .cta-grad .flex.flex-wrap.gap-4 { flex-direction: column; width: 100%; gap: 12px !important; }
  .sp-svc .cta-grad a, .sp-svc .rounded-2xl a.rounded-full { justify-content: center; width: 100%; padding-left: 20px !important; padding-right: 20px !important; }

  /* フッター：3列のリンクを2列に、押しやすい高さに */
  .sp-svc footer nav.grid { grid-template-columns: 1fr 1fr !important; column-gap: 16px !important; row-gap: 0 !important; }
  .sp-svc footer nav.grid a { display: flex; align-items: center; min-height: 40px; font-size: 14px !important; }
  .sp-svc footer .flex.gap-8 { gap: 14px !important; }
  .sp-svc footer img[alt="コネクトボックス"] { height: 40px !important; }
}

/* ==========================================================================
   TOPページ（body.sp-top）
   ========================================================================== */
@media (max-width: 767px) {
  /* 課題カード（5枚）：イラストを7割に縮めて、1枚あたりの縦の長さを詰める */
  .sp-top .s-why-pic { transform: translateX(-50%) scale(.72) !important; transform-origin: 50% 0; }
  .sp-top .s-why-glow { transform: scale(.72); transform-origin: 170px 0; }
  .sp-top .s-why-card { padding-top: 182px !important; padding-bottom: 24px !important; }
  .sp-top .s-why-card h3 { font-size: 20px !important; }
  .sp-top .s-why-card p { font-size: 15px !important; }
  /* フッターのリンクを押しやすく */
  .sp-top .s-foot a { display: inline-flex; align-items: center; min-height: 36px; }
}