/*
 * /services/（template-innovation.php）のモバイル補正。
 *
 * アセットマップの 'innovation' キーから読み込む（functions.php）。css 配列の
 * **最後**に置くこと。base → platform → contact より後でないと上書きできない。
 *
 * ℹ️ 当初 assets/overrides/innovation.css に置いていたが、2026-09-19 に
 *    ここへ移した。動作はどちらでも同じ（どの環境でも git が運び、効く）。
 *    移した理由は CLAUDE.md がハンドオフ手順で assets/overrides/ を
 *    「v3 の __om-edit-overrides を毎回再抽出して入れ直す場所」と定義していること。
 *    これは v3 由来ではなく手で足した補正なので、あそこに置いておくと
 *    次のハンドオフで機械的に消される経路が残っていた。
 *
 * なぜ要るのか:
 *   v3 プロトタイプ（"Tektome Site Prototype.dc.html" 5003-5271行）は
 *   この画面にメディアクエリを一つも持たず、列指定はすべてインライン style。
 *   結果 375px でも多列のまま維持され、中身が潰れて右にはみ出す。
 *   v3 自身も同じ症状で、移植で持ち込んだものではない。
 *   インライン style に勝つ必要があるので !important が要る。
 *
 * 375px 実測（修正前 / Chrome）:
 *   .ip-cards3     列が 115px 固定の3列のまま → 行の右端 417px（+42px はみ出し）、
 *                  カード本文は幅49pxまで潰れる
 *   .ip-startoffer minmax(0,1fr) auto の auto 側をボタンが 248px 占有し、
 *                  本文（見出し・説明文）の列が幅0pxになる
 *
 * 600px の区切りは sol-detail.css の .tk-sold__othergrid と同じ値に合わせた。
 * 601px 以上は v3 のまま。デスクトップ・タブレットの見た目は変えていない。
 */
/*
 * 🔁 狭い画面では min-height を外す（オーナー指摘 2026-09-19）。
 *
 * 経緯: もとは「キービジュアルの下の余白が大きい」（指摘表70行）だったので、
 * 節をフレックス列にして画像を下端へ寄せた。ところが **余白が上に移っただけ**
 * だった（オーナー再指摘）。原因は余白の位置ではなく `min-height:620px` で、
 * 中身がそこまで無いぶんの余りをフレックスがどこかへ配るしかなかった:
 *
 *   375px  子合計424 ＋ padTop56 → 余り139px
 *   768px  子合計494 ＋ padTop56 → 余り 69px
 *   1024px 子合計588            → 余り  0px（ここから下は min-height が効かない）
 *
 * min-height を外せば節が中身の高さに収まり、上にも下にも余りが出ない。
 * 901px 以上は元のまま（画像は下端に吸着、指摘表70行の対応を維持）。
 *
 * ⚠️ !important が要る。min-height はテンプレート側のインライン。
 * ⚠️ 同じ処置をした platform / workspace（min-height:650px）は**この問題が無い**。
 *   375px の実測で子合計が 724 / 645 あり min-height を超えているため隙間0。
 *   あちらに同じ規則を足さないこと。
 */
@media (max-width: 900px) {
  .ip-hero { min-height: 0 !important; }
}

@media (max-width: 600px) {
  /* 3つの活用支援カード。戻すと375pxで本文が49pxまで潰れ、横スクロールが出る。 */
  .ip-cards3 { grid-template-columns: minmax(0, 1fr) !important; }

  /* Start Offer 帯。戻すと見出しと説明文の列が幅0になり、CTAがビューポートを越える。 */
  .ip-startoffer { grid-template-columns: minmax(0, 1fr) !important; }
  /*
   * 1列に畳んでもボタンの入れ物が justify-content:flex-end のままで、
   * ボタンだけ右に寄る（オーナー指摘 2026-09-19・指摘表71行）。
   *
   * 🚨 !important が要る。打ち消す相手は**テンプレート側のインライン**
   *   （<div style="…; justify-content:flex-end;">）。無いと効かない。
   *
   * ⚠️ 375px では見抜けない。あの幅だけボタン(237px)が入れ物(237px)と同幅に
   *   なり、右寄せでも左寄せでも同じ位置に見える。**実測は 480〜560px でやること**
   *   （560px で左のあき174px、480px で94px）。
   */
  .ip-startoffer > div:last-child { justify-content: flex-start !important; }

  /*
   * 「Tektome活用の定着と自走」の 2fr 1fr（.ip-adopt）
   *
   * ⚠️ この2つは**テキストが切れないので自動検出に掛からなかった**。
   *    切れる代わりに列ごと潰れて、375px では左列の本文が幅31pxになり、
   *    見出しが1行1文字・全13行という状態でレンダリングされていた（実測）。
   *    「はみ出していない＝直っている」ではないので、列幅も見ること。
   *
   * 原因は右列（波及ピラミッド）のバー内ラベルが white-space:nowrap で、
   * 「日常的に使うメンバー」の最小幅が右トラックの下限として効くこと。
   * 2fr 1fr でも下限が優先されるので、右が 220px を取り左に 54px しか残らない。
   * nowrap 側は v3 の意図（バーの中で折り返さない）なので触っていない。
   */
  .ip-adopt { grid-template-columns: minmax(0, 1fr) !important; }

  /* 「無償サポートとの違い」の2列。戻すと375pxでカード本文が幅74px（14pxで1行5文字）になる。 */
  .ip-compare2 { grid-template-columns: minmax(0, 1fr) !important; }
}

/* ---------------------------------------------------------------------------
 * 活用支援サービスの問い合わせフォームのボタン
 *
 * 🚨 `.td-form__submit` のホバー・フォーカス・無効の見た目は
 *    **test-designs.css にしかない**。/services/ が読むのは
 *    base / platform / contact / innovation なので、他の埋め込みフォームでは
 *    効いている演出がこのページだけ無かった（2026-09-20 実測）。
 *    値は test-designs.css:185-205 から写している（--purple-700 ほか）。
 * ------------------------------------------------------------------------ */
.ip-form .td-form__submit {
  /* 🚨 色はここで持つこと。インラインに background を残すと
   *    :hover / :disabled が**インラインに負けて何も起きない**（実測）。 */
  background-color: var(--color-arch-purple, #5156BE);
  color: var(--color-draft-white, #fff);
  transition: background-color var(--duration-fast, 150ms) var(--ease-out, ease);
}
.ip-form .td-form__submit:hover { background-color: var(--purple-700, #3D3EC9); }
.ip-form .td-form__submit:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus, 0 0 0 3px rgba(81, 86, 219, 0.25));
}
.ip-form .td-form__submit:disabled {
  background-color: var(--state-disabled-bg, #ECECEC);
  color: var(--state-disabled-fg, #8B8B8B);
  cursor: default;
}

/* 送信完了の表示。`.td-form__success*` も test-designs.css にしかないので値を写す
 * （test-designs.css:219-228）。カードは .ip-formcard 側が持つので、
 * form を隠しても白い下地は残る。 */
.ip-formcard .td-form__success { text-align: center; padding: 20px 8px 8px; }
.ip-formcard .td-form__success-title {
  font-size: 19px; font-weight: var(--fw-semibold, 600);
  color: var(--color-data-black, #101010); margin: 0 0 8px;
}
.ip-formcard .td-form__success-text {
  font-size: 15px; line-height: 1.55;
  color: var(--fg-secondary, #3A3A45); margin: 0;
}