/* ============================================================
   GrowthFix 共通モバイル最適化パッチ v1（260427）
   配置: https://growthfix.jp/assets/css/mobile.css
   読込: 全ページの既存CSSの後（</head>直前）
   方針: PCレイアウトに影響を与えず、SP表示時のみ防衛的に効かせる
        既存CSSを上書きするため !important を使用
   ============================================================ */

/* ============================================================
   全幅で適用（基本防御・PC含む）
   ============================================================ */

/* iOS/Android の自動拡大を抑止 */
html {
  -webkit-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* メディアの100%収納 */
img, video, iframe {
  max-width: 100%;
  height: auto;
}

/* ============================================================
   タブレット〜SP（≤768px）
   ============================================================ */
@media (max-width: 768px) {

  /* --- 横スクロール防止 --- */
  html, body {
    overflow-x: hidden;
    max-width: 100vw;
  }

  /* --- base font: 16px（iOS基準＋Android十分） --- */
  body {
    font-size: 16px !important;
  }

  /* --- 見出し：Android 360pxでも視認できる下限値（v3: 微調整） --- */
  h1,
  .fv_ttl,
  .sv-hero h1,
  .hero h1,
  .sub-hero h1,
  .news-detail h1,
  [class*="hero-title"],
  [class*="-hero-title"] {
    font-size: clamp(25px, 7vw, 36px) !important;
    line-height: 1.4 !important;
    letter-spacing: 0.01em !important;
    word-break: auto-phrase;
    overflow-wrap: anywhere;
    margin-bottom: 16px !important;
    font-weight: 800 !important;
  }
  h2,
  .section-title,
  .sv-section-ttl,
  .wp-section-ttl {
    font-size: clamp(21px, 5.8vw, 28px) !important;
    line-height: 1.45 !important;
    word-break: auto-phrase;
    overflow-wrap: anywhere;
    margin-bottom: 12px !important;
  }
  h3,
  .c-sub_ttl {
    font-size: clamp(18px, 5vw, 23px) !important;
    line-height: 1.5 !important;
    word-break: auto-phrase;
    margin-bottom: 10px !important;
  }
  h4,
  .item_name {
    font-size: clamp(16px, 4.4vw, 20px) !important;
    line-height: 1.55 !important;
    word-break: auto-phrase;
  }

  /* --- 本文：Android 360pxで15.5px、平均~16px ---  */
  p,
  li,
  dd,
  dt {
    font-size: clamp(15px, 4.2vw, 17px) !important;
    line-height: 1.85 !important;
    margin-bottom: 12px !important;
  }

  /* インラインstyleでpx指定された段落 */
  p[style*="font-size"],
  span[style*="font-size"]:not(.required),
  div[style*="font-size"]:not([class]) {
    font-size: clamp(15px, 4.2vw, 17px) !important;
    line-height: 1.85 !important;
  }

  /* インラインstyleで小さな文字に固定されてる span や div */
  [style*="font-size: 12px"],
  [style*="font-size:12px"],
  [style*="font-size: 13px"],
  [style*="font-size:13px"],
  [style*="font-size: 14px"],
  [style*="font-size:14px"],
  [style*="font-size: 15px"],
  [style*="font-size:15px"],
  [style*="font-size: 16px"],
  [style*="font-size:16px"] {
    font-size: clamp(14px, 3.9vw, 16px) !important;
  }

  /* テーブル */
  td, th {
    font-size: clamp(14px, 3.9vw, 16px) !important;
    line-height: 1.7 !important;
  }

  /* 小字キャプション・eyebrow・カテゴリラベル */
  small,
  .small,
  figcaption,
  .eyebrow,
  .category,
  .time,
  .logo_jp,
  .breadcrumb,
  .b-hero-eyebrow,
  .hero-eyebrow {
    font-size: clamp(12px, 3.4vw, 14px) !important;
    line-height: 1.65 !important;
  }

  /* --- ボタン：44px下限＋読める文字サイズ --- */
  a.btn,
  button,
  .button,
  .btn,
  .c-btn,
  .sv-cta-btn,
  [role="button"],
  input[type="submit"],
  input[type="button"] {
    min-height: 44px !important;
    line-height: 1.5 !important;
    font-size: clamp(14px, 3.9vw, 16px) !important;
    padding: 12px 22px !important;
    font-weight: 700 !important;
  }

  /* インラインstyleで作られたCTAボタン（top_本番対策） */
  a[style*="display: inline-block"][style*="padding"] {
    min-height: 44px !important;
    font-size: clamp(14px, 3.9vw, 16px) !important;
    line-height: 1.5 !important;
    box-sizing: border-box !important;
    padding: 12px 22px !important;
    font-weight: 700 !important;
  }

  /* フォーム入力欄も読めるサイズに（iOS入力欄zoom抑止＝16px） */
  input[type="text"],
  input[type="email"],
  input[type="tel"],
  input[type="number"],
  textarea,
  select {
    font-size: 16px !important;
    padding: 12px 14px !important;
    line-height: 1.5 !important;
  }

  /* --- nowrap強制解除 --- */
  /* インラインstyleでwhite-space:nowrapが入っている要素を強制折り返し */
  [style*="white-space: nowrap"],
  [style*="white-space:nowrap"] {
    white-space: normal !important;
  }

  /* --- table横スクロール化 --- */
  table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
  }

  /* --- 横並び固定の解除 --- */
  /* PCでd-flex flex-rowで横並びにしていた箇所を縦積みに */
  .d-flex.flex-row,
  .item.d-flex.flex-row,
  main .d-flex.flex-row {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 16px !important;
  }
  .d-flex.flex-row > *,
  .item.d-flex.flex-row > * {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* service_本番の3カラムグリッドを1カラムに */
  .sv-cards,
  .sv-steps,
  .sv-about-grid,
  .sv-map {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }
}

/* ============================================================
   タブレット〜SP（≤768px）コンテナ幅・余白圧縮
   PC縮小感を抑えるため、container幅を100%に強制し
   セクション余白を詰める
   ============================================================ */
@media (max-width: 768px) {

  /* container類を100%幅に強制（PC固定幅対策） */
  .c-inner,
  .container,
  .inner,
  .b-container,
  .header-inner,
  .b-header-inner,
  [class*="-container"]:not([class*="hero"]),
  [class*="-inner"]:not([class*="hero"]) {
    max-width: 100% !important;
    width: 100% !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
    box-sizing: border-box !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* セクション余白を抑える（PCの80-120pxは過剰） */
  section,
  .section,
  main > section {
    padding-top: 56px !important;
    padding-bottom: 56px !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* セクション内の余分なmargin */
  section > .container,
  section > .c-inner,
  section > .inner {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }
}

/* ============================================================
   スマホ（≤600px）
   ============================================================ */
@media (max-width: 600px) {

  /* セクション余白をさらに詰める */
  section,
  .section {
    padding-top: 44px !important;
    padding-bottom: 44px !important;
  }

  /* container内側の左右padding */
  .c-inner,
  .container,
  .inner,
  .b-container,
  .header-inner {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  /* 見出しのletter-spacing詰め */
  h1, h2, .fv_ttl, .sv-hero h1 {
    letter-spacing: 0 !important;
  }

  /* 本文の行間をSPで詰める（情報密度UP） */
  p, li {
    line-height: 1.75 !important;
  }
}

/* ============================================================
   WPテーマ（GrowthTheme）固有の上書き
   コーポレートTOP（/）専用。grid !important で固定2カラムを
   生成しているため、より強い指定で縦積み化する
   ============================================================ */
@media (max-width: 768px) {

  /* fv（ファーストビュー）の独自rem単位対策 */
  .fv .fv_ttl {
    font-size: clamp(26px, 7vw, 44px) !important;
    line-height: 1.4 !important;
  }
  .fv .inner.d-flex.flex-row {
    flex-direction: column !important;
    gap: 24px !important;
  }
  .fv .inner.d-flex.flex-row > .item {
    width: 100% !important;
  }

  /* FV装飾背景・装飾テキスト：モバイルでは完全非表示
     ※ 4/28: .fv_en（回転cursiveテキスト "Growth/Fix"）が画面全体を覆う問題があり追加
     .fv_bg1/.fv_bg2 は装飾背景PNG（z-index:-1） */
  .fv .fv_bg1,
  .fv .fv_bg2,
  .fv .fv_en {
    display: none !important;
  }
  /* 本文を装飾の上に乗せる */
  .fv {
    position: relative !important;
    overflow: hidden !important;
  }
  .fv .inner {
    position: relative !important;
    z-index: 1 !important;
  }

  /* service セクション：grid !important で固定2カラム化されているのを縦積みに */
  .service .item.d-flex.flex-row,
  .service .item {
    display: block !important;
    grid-template-columns: 1fr !important;
    padding: 18px 14px !important;
    margin-bottom: 14px !important;
  }
  .service .item_name {
    font-size: clamp(17px, 4.8vw, 22px) !important;
    min-width: unset !important;
    margin: 0 0 12px 0 !important;
    padding: 0 !important;
    color: #ffffff !important;
    line-height: 1.5 !important;
    font-weight: 700 !important;
  }
  .service .area,
  .service .row.d-flex.flex-row {
    width: 100% !important;
    flex-direction: column !important;
    align-items: stretch !important;
  }
  .service .logo,
  .service .logo_name,
  .service .content {
    width: 100% !important;
    flex-direction: column !important;
    align-items: flex-start !important;
  }
  .service .logo_en {
    font-size: clamp(16px, 4.4vw, 20px) !important;
    line-height: 1.4 !important;
    font-weight: 800 !important;
  }
  .service .logo_jp {
    font-size: clamp(12px, 3.4vw, 14px) !important;
    line-height: 1.65 !important;
    margin-top: 4px !important;
  }
  .service .txt {
    font-size: clamp(14px, 3.9vw, 16px) !important;
    line-height: 1.8 !important;
    margin-top: 10px !important;
  }
  .service .btn {
    align-self: flex-end !important;
    margin-top: 12px !important;
  }

  /* ── そして、解剖する ── 等のラベル文字も大きく */
  .service > .c-inner > p[style*="font-size: 12px"],
  .service > .c-inner > p[style*="font-size:12px"] {
    font-size: clamp(13px, 3.6vw, 15px) !important;
    margin-top: 32px !important;
    margin-bottom: 16px !important;
  }

  /* about / know / news 等の他セクション縦積み */
  .about .area,
  .know .item,
  .know .box {
    width: 100% !important;
  }
}

/* ============================================================
   LIVE WEBINAR バー（.next-seminar-bar）モバイル最適化
   全LP上部に配置されるセミナー告知バー。インラインstyleで作られているため
   nth-of-type で個別ターゲット
   ============================================================ */
@media (max-width: 768px) {

  .next-seminar-bar {
    padding: 10px 12px !important;
  }

  .next-seminar-bar a {
    font-size: 11.5px !important;
    line-height: 1.55 !important;
    letter-spacing: 0.01em !important;
  }

  /* 1番目のspan：LIVE WEBINAR 赤バッジ */
  .next-seminar-bar a > span:nth-of-type(1) {
    font-size: 9.5px !important;
    padding: 2px 6px !important;
    margin-right: 5px !important;
    letter-spacing: 0.08em !important;
  }

  /* strong：5/15 金 12:00-13:00 */
  .next-seminar-bar strong {
    font-size: 12px !important;
  }

  /* 2番目のspan："／" 区切りはモバイルで非表示 */
  .next-seminar-bar a > span:nth-of-type(2) {
    display: none !important;
  }

  /* 3番目のspan：メインコピー → 改行して下段に */
  .next-seminar-bar a > span:nth-of-type(3) {
    display: block !important;
    margin-top: 4px !important;
    font-size: 11.5px !important;
  }

  /* 4番目のspan：CTA "無料 ／ 申込はこちら ▶" */
  .next-seminar-bar a > span:nth-of-type(4) {
    display: inline-block !important;
    margin-top: 6px !important;
    margin-left: 0 !important;
    font-size: 11px !important;
    padding: 4px 10px !important;
  }
}

/* ============================================================
   iPhone SE等（≤375px）
   ============================================================ */
@media (max-width: 375px) {

  section,
  .section {
    padding-top: 36px !important;
    padding-bottom: 36px !important;
  }

  .c-inner,
  .container,
  .inner {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  h1, .fv_ttl {
    font-size: clamp(20px, 6.8vw, 28px) !important;
  }
}