/* ═══════════════════════════════════════════════════════════
   静的化にあたって足したもの。旧サイトのCSSには手を入れず、
   ここだけを追加で読み込む
   ═════════════════════════════════════════════════════════ */

/* ── ヒーローの背景スライダー ──────────────────
   旧サイトは canvas にJSで模様を描いていた。JSを外したので、
   手持ちの写真を静かに入れ替える形にする。
   寸法と見せ方は TABICO のヒーローに揃える。
     ・高さは clamp(430px,74vh,720px) の固定ブロック
     ・下端はぼかさず断ち切る（境目をはっきりさせる）
     ・写真の上に乗る文字は白 */
.hero-dark{min-height:clamp(430px,74vh,720px);
  display:flex;align-items:center;
  padding-top:110px !important;padding-bottom:56px !important}
/* 旧サイトは背景を上から52%だけに敷いていた。ヒーロー全面に広げる */
.hero-dark > div[aria-hidden="true"]{
  height:100% !important;top:0 !important;bottom:0 !important}

.hero-slider{position:absolute;inset:0;overflow:hidden}
.hero-slider__i{position:absolute;inset:0;background-size:cover;background-position:center;
  opacity:0;transition:opacity 1.8s ease-in-out;transform:scale(1.04)}
.hero-slider__i.is-on{opacity:1}
/* 覆い。TABICOと同じ考え方で、下ほど濃くして文字を浮かせる。
   ページの地色へは抜かない＝下端で切れる */
/* 2026-09-17: 黒い覆いをやめ、白い覆いに変えた。写真が暗くて濃色のロゴが
   読めなかったため。上ほど濃い白にして、ヘッダーが乗る上端を最も明るくする。 */
.hero-slider__scrim{position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(to bottom,rgba(255,255,255,.88) 0%,rgba(255,255,255,.66) 42%,rgba(255,255,255,.54) 100%),
    radial-gradient(130% 100% at 74% 22%,rgba(255,255,255,0) 30%,rgba(255,255,255,.36) 100%)}
/* 方眼。黒の線で、目盛りは粗く取る */
/* 2026-09-17: 覆いを白にしたので、方眼も白線から濃色の線に変える */
.hero-slider__grid{position:absolute;inset:0;pointer-events:none;
  background-image:
    linear-gradient(to right,rgba(18,38,74,.07) 1px,transparent 1px),
    linear-gradient(to bottom,rgba(18,38,74,.07) 1px,transparent 1px);
  background-size:32px 32px}
.hero-slider__grid::after{content:"";position:absolute;inset:0;
  background-image:
    linear-gradient(to right,rgba(18,38,74,.12) 1px,transparent 1px),
    linear-gradient(to bottom,rgba(18,38,74,.12) 1px,transparent 1px);
  background-size:160px 160px}

/* 2026-09-17: 背景を白い覆いに変えたので、文字は濃色に戻す。
   白文字のままだと明るい写真の上で完全に読めなくなる。 */
.hero-dark h1,
.hero-dark h1 .hero-letter{color:#12264a !important;text-shadow:0 1px 16px rgba(255,255,255,.7)}
.hero-dark p{color:#2b3b56 !important}
.hero-dark .text-primary,
.hero-dark .text-gold{color:#a07714 !important}
/* 2026-09-17: 「SCROLL」の文字と縦線は不要になったので、要素ごと削除した
   （content/top/index.html）。ここの色指定もあわせて外している。 */

/* ヘッダー。2026-09-17: 白抜きをやめ、ロゴは常に元の色のまま出す。
   白ロゴはヒーローを抜けた先の白背景に溶けて、ほとんどの時間読めなかった。
   代わりに、ヘッダーが乗る**上端だけ**を白く起こして濃いロゴを読ませる。
   スクリム全体は明るくしない。中ほどから下を明るくすると、白抜きの見出し
   （.hero-dark h1 は #fff）が読めなくなるため。 */
/* ロゴの大きさは画像の高さで決める。
   元の scale-[1.9] のような transform による拡大は、レイアウト上の箱の大きさを
   変えないまま見た目だけを引き伸ばすため、ヘッダー（h-16＝64px）から上に
   はみ出して切れていた。倍率を下げても性質は同じなので、拡大自体をやめる。 */
/* このサイトの Tailwind は scale-[1.9] を transform ではなく**独立した scale
   プロパティ**で出力する。そのため transform:none では拡大が消えず、実測で
   箱40pxに対し描画76px（=40×1.9）、上下に6pxずつはみ出して切れていた。 */
.hero-head .origin-left{transform:none !important;scale:1 !important}
/* 大きさは高さで決める。上部では大きく、スクロール後は小さく */
.hero-head img{filter:none !important;height:48px !important;width:auto !important;
  transition:height .25s ease}
/* PC・iPad では最上部のロゴを大きく見せる。ヘッダーは64pxなので上下3pxずつ残る。
   スクロール後（.is-stuck）は下の34pxが効くので、ここは :not() で最上部だけに限る */
@media (min-width:768px){
  .hero-head:not(.is-stuck) img{height:58px !important}
}
.hero-head.is-stuck img{height:34px !important}
/* ナビの色はマークアップ側の text-ink（濃色）に任せる。ここでは上書きしない */
/* 2026-09-17: ヘッダーに白い帯をかぶせるのはやめた（「白い雲」に見えるため）。
   明るさは、下の .hero-slider__scrim 側＝背景スライダー本体で確保する。 */

/* ヒーローを抜けたあと。白い紙の上に乗るので、ロゴもナビも濃色に戻す */
.hero-head.is-stuck{background:rgba(255,255,255,.92) !important;
  -webkit-backdrop-filter:saturate(1.6) blur(10px);backdrop-filter:saturate(1.6) blur(10px);
  box-shadow:0 1px 0 rgba(18,38,74,.10),0 6px 24px rgba(18,38,74,.06)}
.hero-head.is-stuck img{filter:none}

/* ロゴの大きさは上の .hero-head img で決めている（高さ40px）。
   ここで transform を使うと、また箱からはみ出す。 */
/* 「無料診断」ボタンは元の紺のまま浮かせる */
.hero-head a[href="/contact"]{background:#174186 !important;color:#fff !important}

/* ── 表示アニメ ────────────────────────────────
   TABICO と同じ「画面に入ったらふわっと上がってくる」動き。
   旧サイトの framer-motion を外した代わり */
.js .rv-fx{opacity:0;transform:translate3d(0,26px,0)}
.js .rv-fx.is-in{opacity:1;transform:none;
  transition:opacity .95s cubic-bezier(.08,.92,.35,1),
             transform .95s cubic-bezier(.08,.92,.35,1)}
@media (prefers-reduced-motion:reduce){
  .js .rv-fx{opacity:1 !important;transform:none !important}
}

/* ── お問い合わせ ──────────────────────────────
   TABICO と同じく1列に積む。入力欄は角を落として、
   線と余白で見せる */
.cform-plain{display:block !important}
.cform-plain > *{margin:0 0 20px !important}
.cform-plain label{display:block;margin:0 0 7px !important;
  font-size:12px !important;font-weight:700 !important;letter-spacing:.02em}
.cform-plain input[type=text],
.cform-plain input[type=email],
.cform-plain input[type=tel],
.cform-plain input:not([type]),
.cform-plain select,
.cform-plain textarea{
  border-radius:3px !important;border:1px solid #c3cad4 !important;
  padding:12px 13px !important;font-size:15px !important;background:#fff !important}
.cform-plain input:focus,
.cform-plain select:focus,
.cform-plain textarea:focus{
  outline:2px solid #174186 !important;outline-offset:1px;border-color:#174186 !important}
/* 送信ボタン */
#form button[type=submit]{border-radius:3px !important;padding:14px 40px !important}

/* ── 「AI番頭と一般的なAI導入支援の違い」──────────────
   旧デザインは角丸2xlのカードに✓✕を並べる、いかにもAIサービス然とした形。
   TABICO の比較表に寄せて、角を落とし、線と余白で見せる作りにする。
   HTMLは触らず、クラスに当たるスタイルだけ差し替える */
#difference-cards,
.diff-grid{ }
[data-diff] { }
/* 対象は why ページの2枚組カード */
.diff-plain .rounded-2xl{
  border-radius:2px !important;
  border:1px solid #e2e6ec !important;
  box-shadow:none !important;
  padding:30px 28px !important;
  background:#fff !important;
}
/* 自社側だけ左に太線を引いて差をつける（色面で押さない） */
.diff-plain > *:last-child .rounded-2xl{
  border-left:3px solid #174186 !important;
  background:#fbfcfd !important;
}
/* 見出しの「一般的なAI導入支援 / AI番頭」 */
.diff-plain .text-xs.font-bold{
  font-size:11px !important;letter-spacing:.14em !important;
  color:#9096a2 !important;text-transform:uppercase;
}
.diff-plain .text-lg.font-bold{
  font-size:17px !important;color:#0a0a0a !important;margin-top:2px !important;
}
/* ✓✕の丸を、線だけの小さな印に落とす */
.diff-plain ul li > span:first-child,
.diff-plain li > span:first-child{
  width:18px !important;height:18px !important;border-radius:0 !important;
  background:transparent !important;color:#9096a2 !important;
  font-size:13px !important;font-weight:400 !important;
}
.diff-plain > *:last-child li > span:first-child{color:#174186 !important}
.diff-plain li{
  padding:11px 0 !important;border-top:1px solid #eef1f5 !important;
  font-size:14px !important;line-height:1.85 !important;color:#5c6470 !important;
}
.diff-plain li:first-child{border-top:0 !important}
/* 下に敷かれていた装飾の波線は消す */
.diff-plain svg.absolute{display:none !important}

/* ── 「6ヶ月間のフロー」──────────────────────────
   旧デザインは6枚の角丸カードを横並び。TABICO の flow に寄せて、
   縦に積んだ行に丸数字を打ち、罫線でつなぐ形にする */
.flow-plain{display:block !important}
.flow-plain > *{
  display:flex !important;align-items:baseline !important;gap:16px !important;
  border:0 !important;border-top:1px solid #e2e6ec !important;
  border-radius:0 !important;background:transparent !important;
  box-shadow:none !important;padding:16px 0 16px 4px !important;height:auto !important;
}
.flow-plain > *:first-child{border-top:0 !important}
/* 丸数字 */
.flow-plain .rounded-full{
  flex:0 0 28px !important;width:28px !important;height:28px !important;
  background:#174186 !important;color:#fff !important;font-size:13px !important;
}
/* 「1ヶ月目」 */
.flow-plain .text-gold{
  flex:0 0 auto !important;margin-top:0 !important;
  font-size:12px !important;color:#12264a !important;letter-spacing:.02em !important;
}
/* 内容 */
.flow-plain .text-ink{
  margin-top:0 !important;font-size:15px !important;font-weight:400 !important;
  line-height:1.8 !important;color:#0a0a0a !important;
}
@media (max-width:640px){
  .flow-plain > *{flex-wrap:wrap !important}
  .flow-plain .text-ink{flex:1 0 100% !important;padding-left:44px !important;margin-top:4px !important}
}

/* ── よくある質問 ─────────────────────────────────
   TABICO の .fold と同じ見せ方に揃える。
     ・角丸を落として、細い罫で囲む
     ・項目どうしは罫を1本だけ共有して縦に積む
     ・＋の印は線2本で描き、開くと縦線が消えて − になる
   旧サイトのHTML（button＋grid-rows）はそのまま使い、見た目だけ差し替える */
.qa-plain{border:1px solid #e2e6ec !important;border-radius:3px !important;
  background:#fff !important;overflow:hidden}
.qa-plain > * + *{border-top:1px solid #e2e6ec !important}
.qa-plain > *{border-color:#e2e6ec !important}

/* 質問の行 */
.qa-plain button{padding:15px 46px 15px 18px !important;position:relative;
  font-size:15px !important;line-height:1.6 !important;font-weight:700 !important;
  color:#0a0a0a !important;background:transparent !important}
.qa-plain button:hover{color:#174186 !important}
.qa-plain button:focus-visible{outline:2px solid #174186;outline-offset:-2px}

/* 「Q」の印は、TABICO の「詳しく」タグと同じ見せ方にする */
.qa-plain button .font-display{
  display:inline-block;margin-right:10px;padding:2px 8px;
  border-radius:2px;background:#f6f6f6 !important;color:#9096a2 !important;
  font-size:11px !important;font-weight:400 !important;line-height:1.5}

/* ＋を線2本で描き直す。開くと縦線だけ消えて − になる */
.qa-plain button > span:last-child{
  position:absolute !important;right:18px;top:50%;margin-top:-7px;
  width:14px;height:14px;font-size:0 !important;transform:none !important;
  transition:none !important}
.qa-plain button > span:last-child::before,
.qa-plain button > span:last-child::after{
  content:"";position:absolute;background:#9096a2;
  transition:transform .2s,opacity .2s}
.qa-plain button > span:last-child::before{left:0;top:6px;width:14px;height:1px}
.qa-plain button > span:last-child::after{left:6px;top:0;width:1px;height:14px}
.qa-plain button[aria-expanded="true"] > span:last-child::after{
  transform:scaleY(0);opacity:0}
.qa-plain button[aria-expanded="true"]{border-bottom:1px solid #e2e6ec}

/* 答えの中身 */
.qa-plain button + div p{padding:6px 18px 18px !important;
  font-size:15px !important;line-height:1.95 !important;color:#5c6470 !important;
  display:block !important}
/* 「A」の飾りは TABICO には無いので落とす */
.qa-plain button + div p > .font-display{display:none !important}