/* ==========================================================================
   AI導入支援 LP 専用スタイル
   claude.ai/design のキャンバス（Claude導入支援LP.dc.html）から移植。
   レイアウトはHTMLのインラインstyleが持っているため、ここには
   1) 共通のベーススタイルとキーフレーム（元ファイルの <helmet> 相当）
   2) ホバー時のスタイル（元ファイルの style-hover 属性を変換したもの）
   のみを置いています。
   ホバー指定はインラインstyleを上書きする必要があるため !important 必須です。
   ========================================================================== */

/* --- ベース（移植元 <helmet> の <style>） --- */
html,body{margin:0;padding:0;background:#FBFAF7;}
*{box-sizing:border-box;}
a{color:#1F7A6B;text-decoration:none;}
a:hover{color:#125246;}
::selection{background:#FFB27A;color:#16191C;}
@keyframes omeFloatA{0%,100%{transform:translate(0,0) scale(1)}33%{transform:translate(7%,-6%) scale(1.14)}66%{transform:translate(-5%,5%) scale(.92)}}
@keyframes omeFloatB{0%,100%{transform:translate(0,0) scale(1.05)}40%{transform:translate(-8%,4%) scale(.9)}70%{transform:translate(5%,7%) scale(1.16)}}
@keyframes omeFloatC{0%,100%{transform:translate(0,0) scale(.95)}50%{transform:translate(6%,8%) scale(1.2)}}
@keyframes omeTicker{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* --- ホバー（移植元の style-hover 属性） --- */
.hv-1:hover{color:#16191C !important;}
.hv-2:hover{background:#1F7A6B !important;color:#FBFAF7 !important;}
.hv-3:hover{border-color:#16191C !important;background:#FBFAF7 !important;color:#16191C !important;}
.hv-4:hover{border-color:rgba(22,25,28,0.3) !important;}
.hv-5:hover{background:rgba(47,197,182,0.07) !important;}
.hv-6:hover{border-color:#16191C !important;background:#16191C !important;color:#FBFAF7 !important;}
.hv-7:hover{background:#2FC5B6 !important;color:#16191C !important;}
.hv-8:hover{background:#1F7A6B !important;}
.hv-9:hover{color:#1F7A6B !important;}

/* ==========================================================================
   お問い合わせフォーム
   通常時のスタイルはHTMLの style 属性（インライン）が持っているため、
   それを上書きする指定には !important が必要です。
   ========================================================================== */

/*
 * 送信完了で入力欄を畳む。hidden 属性だけでは効かない（欄の display:flex が
 * インライン指定なのでブラウザ既定の [hidden]{display:none} に勝ってしまう）。
 * !important がないと、完了メッセージが入力欄の下に並んで出てしまう。
 */
.cform__fields[hidden] { display: none !important; }

/* 移植元デザインは outline:none だけで、フォーカス位置が分からなかったので枠色で示す */
.cform__input:focus { border-color: #1F7A6B !important; }

/*
 * エラー表示。インラインの border 指定に勝つ必要があるため !important 必須。
 */
.cform__input.is-error {
  border-color: #D7492F !important;
  background: rgba(215, 73, 47, 0.05) !important;
}

/* ハニーポット。display:none だと入力を避けるボットがいるので画面外に逃がす */
.cform__trap {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/*
 * Turnstile のウィジェットは幅300px固定で、狭い画面では器に収まらない。
 * 親（#cta）が overflow:hidden なので放っておくと右側の Cloudflare 表記ごと
 * 切り落とされる。足りない分は横スクロールで見せる。
 * min-height は読み込み中のガタつき止め。
 */
.cform__captcha {
  min-height: 65px;
  max-width: 100%;
  overflow-x: auto;
}

.cform__status {
  margin: 0;
  font-size: 13px;
  line-height: 1.9;
  color: #D7492F;
}

.cform__status[hidden] { display: none; }

.cform__submit { transition: background-color 220ms cubic-bezier(.22,.61,.36,1); }

.cform__submit:disabled {
  background: rgba(22, 25, 28, 0.4) !important;
  cursor: default !important;
}

.cform__note {
  margin: 0;
  font-size: 12px;
  line-height: 1.9;
  color: rgba(22, 25, 28, 0.55);
}

.cform__done { padding: 12px 0; outline: none; }
.cform__done[hidden] { display: none; }

.cform__done-title {
  margin: 0;
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 21px;
  font-weight: 700;
  line-height: 1.62;
  letter-spacing: 0.04em;
  color: #1F7A6B;
}

.cform__done-body {
  margin: 20px 0 0;
  font-size: 15px;
  line-height: 2.15;
  color: #4A5459;
}

/* ==========================================================================
   レスポンシブ（タブレット・スマホ）
   移植元デザインはPC幅（1440px想定）専用でメディアクエリを持たないため、
   この章だけ移植後に追加しています。

   通常時のレイアウトはHTMLの style 属性（インライン）にあるので、
   ここでの上書きには !important が必要です。
   対応する class は index.html 側の r-* です。

   ブレークポイント
     1000px … 段組みを畳む。ヘッダーのナビゲーションを隠す
      700px … 2カラムを1カラムに。余白と文字をさらに詰める
   ========================================================================== */

@media (max-width: 1000px) {
  /* --- 段組みを畳む --- */
  .r-split     { grid-template-columns: 1fr !important; gap: 40px !important; }
  .r-cards2    { grid-template-columns: 1fr !important; gap: 20px !important; }
  .r-cards3    { grid-template-columns: repeat(2, 1fr) !important; gap: 20px !important; }
  .r-flow-row  { grid-template-columns: 1fr !important; gap: 10px !important; }

  /* ビフォーアフター。矢印（3番目の子）は縦積みだと向きが合わないので隠す */
  .r-ba { grid-template-columns: 1fr !important; gap: 14px !important; }
  .r-ba > div:nth-child(3) { display: none !important; }

  /*
   * ヒーローの数値3本。区切りが縦罫線なので、縦積みでは横罫線に置き換える。
   * 子要素の左padding（56px）も効かなくなるので戻す。
   */
  .r-stats { grid-template-columns: 1fr !important; }
  .r-stats > div { padding: 22px 0 !important; border-left: 0 !important; }
  .r-stats > div + div { border-top: 1px solid rgba(22, 25, 28, 0.14) !important; }

  /* --- 余白 --- */
  .r-container  { padding-inline: 24px !important; }
  .r-pad-lg     { padding-block: 76px !important; }
  .r-pad-lg-top { padding-top: 76px !important; }
  .r-pad-md     { padding-top: 56px !important; padding-bottom: 40px !important; }
  .r-card       { padding: 32px 26px !important; }

  /* --- 文字サイズ。畳んだ幅に合わせて滑らかに縮める --- */
  h1 { font-size: clamp(30px, 5.4vw, 48px) !important; }
  h2 { font-size: clamp(24px, 3.9vw, 38px) !important; }
  .r-num { font-size: clamp(34px, 4.6vw, 46px) !important; }

  /*
   * ヘッダーのナビ。5つのリンク＋CTAで519px あり、この幅では収まらない。
   * ハンバーガーは作らず、セクションリンクだけ隠してCTA（最後の1つ）を残す。
   */
  .r-nav a:not(:last-child) { display: none !important; }
}

@media (max-width: 700px) {
  .r-cards3 { grid-template-columns: 1fr !important; }

  .r-container  { padding-inline: 20px !important; }
  .r-pad-lg     { padding-block: 56px !important; }
  .r-pad-lg-top { padding-top: 56px !important; }
  .r-card       { padding: 26px 20px !important; }

  /* ロゴ横の英字タグライン。この幅ではロゴとCTAだけで足りる */
  .r-tagline { display: none !important; }
}