/* ============================================================
   NeoRiv モバイル対応 上書きスタイル（狙い撃ち版）
   元デザインはPC固定幅・インラインスタイル。スマホ幅だけ !important で調整。
   ============================================================ */

/* ---------- 共通（~900px） ---------- */
@media (max-width: 900px) {
  html, body { overflow-x: hidden !important; }
  #nr-shell img, #nr-shell iframe, #nr-shell video, #nr-shell svg { max-width: 100% !important; }
}

/* ---------- スマホ（~768px） ---------- */
@media (max-width: 768px) {

  /* --- 画面より広い固定幅を可変に --- */
  #nr-shell [style*="width: 1000px"],
  #nr-shell [style*="max-width: 1000px"],
  #nr-shell [style*="width: 380px"] { width: 100% !important; max-width: 100% !important; }

  /* --- 横並びグリッド → 1カラム
         （ただし「沿革の行=118px 1fr」とヒーローの3D showcase=perspective は除外） --- */
  #nr-shell [style*="display: grid"]:not([style*="118px 1fr"]):not([style*="perspective"]) {
    grid-template-columns: 1fr !important;
    gap: 18px !important;
  }

  /* --- 沿革（年表）の行：年と本文は横並びのまま、年カラムだけ詰める → 線とドットを維持 --- */
  #nr-shell [style*="118px 1fr"] { grid-template-columns: 76px 1fr !important; gap: 14px !important; }

  /* --- 大きい左右パディングを圧縮 --- */
  #nr-shell [style*="padding: 60px 44px"],
  #nr-shell [style*="padding: 80px 44px"],
  #nr-shell [style*="padding: 100px 44px"],
  #nr-shell [style*="padding: 0px 44px"] { padding-left: 20px !important; padding-right: 20px !important; }

  /* --- セクション間の縦余白を詰める（PC用の130〜140pxは広すぎ） --- */
  #nr-shell section { padding-top: 56px !important; padding-bottom: 56px !important; }
  /* 左右も44px→20pxへ（横並びだった名残で広いものを詰める） */
  #nr-shell section[style*=" 44px"] { padding-left: 20px !important; padding-right: 20px !important; }
  /* 各ページ先頭のヒーローは固定ヘッダー(58px)分を確保して被り防止 */
  #nr-shell section:first-of-type { padding-top: 88px !important; }

  /* --- 沿革の縦線：旧グリッド(118px)固定のままだったのでドット中心(76+14=90px)へ寄せる --- */
  #nr-shell [style*="left: 118px"][style*="top: 6px"][style*="width: 2px"] { left: 89px !important; }

  /* --- 日本語テキストの折り返しを自然に（末尾1文字だけ落ちるオーファン防止） --- */
  #nr-shell p, #nr-shell h1, #nr-shell h2, #nr-shell h3 { text-wrap: pretty; }
  #nr-shell [style*="text-align: center"] { text-wrap: balance; }

  /* --- サービスカード：画像を常に上に（even カードの order:2 を打ち消す） --- */
  #nr-shell [style*="aspect-ratio: 4 / 3"] { order: -1 !important; margin-bottom: 4px !important; }

  /* =========================================================
     ヒーロー（トップ）：PC用の動くphone showcaseはスマホで潰れるので隠し、
     高さを内容に合わせて空白を解消。Scrollイラストが自然に収まる。
     ========================================================= */
  #nr-shell #nr-top [style*="perspective"] { display: none !important; }          /* 3D phone showcase */
  #nr-shell #nr-top [style*="pointer-events: none"] { display: none !important; } /* 白グラデ overlay */
  #nr-shell #nr-top {
    height: auto !important; min-height: 0 !important;
    padding-top: 82px !important;   /* 固定ヘッダー(58px)分＋余白。見出し・小見出しが隠れないように */
    padding-bottom: 24px !important;
  }
  /* ルートの 100vh 指定が空白を生むのを防ぐ */
  #nr-shell #nr-top [style*="min-height: 100vh"],
  #nr-shell #nr-top [style*="height: 100vh"] { min-height: 0 !important; height: auto !important; }

  /* Scroll インジケーター：PC用の装飾。スマホでは位置が中途半端になり邪魔なので非表示
     （スマホはスワイプで自然にスクロールするため不要） */
  #nr-shell #nr-top [style*="bottom: 34px"] { display: none !important; }

  /* =========================================================
     ヘッダー：純正ナビは隠してハンバーガー（JS）に置き換え
     ========================================================= */
  body.nr-mob #nr-shell header { display: none !important; }

  /* （旧・追従CTAの縮小指定は新デザイン置換に伴い削除） */

  /* =========================================================
     フッター：間延び解消（縦余白を詰め、リンク2列に）
     ========================================================= */
  #nr-shell footer { padding-top: 36px !important; padding-bottom: 24px !important; }
  #nr-shell footer [style*="display: grid"] { gap: 22px !important; }

}

/* ---------- 小型スマホ（~430px）：見出し縮小 ---------- */
@media (max-width: 430px) {
  #nr-shell [style*="font-size: 64px"],
  #nr-shell [style*="font-size: 60px"],
  #nr-shell [style*="font-size: 56px"],
  #nr-shell [style*="font-size: 52px"],
  #nr-shell [style*="font-size: 48px"] { font-size: 34px !important; line-height: 1.22 !important; }
}

/* ============================================================
   カスタム モバイルヘッダー（ハンバーガー）— JSが body.nr-mob を付与
   ============================================================ */
#nr-mobbar, #nr-mobmenu, #nr-mobov { display: none; }

/* メニュー/バーのフォントをサイト本体（Noto Sans JP）に統一 */
#nr-mobbar, #nr-mobmenu, #nr-mobmenu .nr-mobitem, #nr-mobbtn {
  font-family: "Noto Sans JP", -apple-system, BlinkMacSystemFont, sans-serif !important;
}

body.nr-mob #nr-mobbar {
  display: flex; align-items: center; justify-content: space-between;
  position: fixed; top: 0; left: 0; right: 0; height: 58px; padding: 0 16px;
  background: rgba(255,255,255,0.96); backdrop-filter: blur(8px);
  box-shadow: 0 1px 0 rgba(0,0,0,0.06); z-index: 9000;
}
body.nr-mob #nr-mobbar .nr-moblogo { display: flex; align-items: center; cursor: pointer; }
body.nr-mob #nr-mobbar .nr-moblogo img { height: 30px; width: auto; display: block; }

#nr-mobbtn {
  width: 42px; height: 42px; border: 0; background: transparent; cursor: pointer;
  display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 5px; padding: 0;
}
#nr-mobbtn span { display: block; width: 24px; height: 2px; background: #222; border-radius: 2px; transition: transform .25s, opacity .25s; }
body.nr-open #nr-mobbtn span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
body.nr-open #nr-mobbtn span:nth-child(2) { opacity: 0; }
body.nr-open #nr-mobbtn span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

body.nr-mob #nr-mobov {
  display: block; position: fixed; inset: 0; background: rgba(0,0,0,0.4);
  opacity: 0; pointer-events: none; transition: opacity .25s; z-index: 8998;
}
body.nr-mob.nr-open #nr-mobov { opacity: 1; pointer-events: auto; }

body.nr-mob #nr-mobmenu {
  display: flex; flex-direction: column;
  position: fixed; top: 58px; right: 0; width: min(78vw, 300px); height: calc(100vh - 58px);
  background: #fff; box-shadow: -4px 0 24px rgba(0,0,0,0.12); z-index: 8999;
  transform: translateX(100%); transition: transform .28s ease; padding: 8px 0;
}
body.nr-mob.nr-open #nr-mobmenu { transform: translateX(0); }
#nr-mobmenu .nr-mobitem {
  display: flex; align-items: center; padding: 16px 24px; font-size: 16px; font-weight: 700;
  color: #222; text-decoration: none; border-bottom: 1px solid #f0f1f3; cursor: pointer;
}
#nr-mobmenu .nr-mobitem:last-child { border-bottom: 0; color: #fff; background: #ff9900; margin: 12px 16px 0; border-radius: 999px; justify-content: center; }
#nr-mobmenu .nr-mobitem:active { background: #f4f5f6; }
#nr-mobmenu .nr-mobitem:last-child:active { background: #e88c00; }

/* 純正の追従CTAがハンバーガーに重ならないよう z を確保済み（z-index:80 < 8998） */

/* ============================================================
   制作実績 ミニ showcase（スマホのヒーローに挿入：横スクロール自動ループ）
   画像はカードでクロップ表示（Webサイトは上部=ヘッダーが見える）＋ラベル
   ============================================================ */
.nr-mobshowcase { display: none; }
body.nr-mob .nr-mobshowcase {
  display: block; overflow: hidden; margin: 10px 0 2px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.nr-mobshowcase .nr-track {
  display: flex; gap: 12px; width: max-content;
  animation: nr-marq 34s linear infinite;
}
.nr-mobshowcase:active .nr-track { animation-play-state: paused; }
.nr-mobshowcase .nr-card {
  flex: 0 0 auto; width: 156px; height: 108px; border-radius: 14px; overflow: hidden;
  position: relative; background: #e9eef5; box-shadow: 0 8px 20px rgba(0,40,90,0.14);
}
.nr-mobshowcase .nr-card img {
  width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block;
}
.nr-mobshowcase .nr-card .nr-chip {
  position: absolute; left: 8px; bottom: 8px;
  background: rgba(15,20,25,0.62); color: #fff; font-size: 11px; font-weight: 700;
  letter-spacing: .02em; padding: 3px 9px; border-radius: 999px; backdrop-filter: blur(3px);
}
@keyframes nr-marq { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ヒーローの装飾ブロブに 4.5秒ループの浮遊アニメ（トップビューに動き） */
@media (prefers-reduced-motion: no-preference) {
  #nr-shell #nr-top [style*="border-radius: 0px 0px 0px 38%"] {
    animation: nr-float 4.5s ease-in-out infinite;
  }
}
@keyframes nr-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }

/* ============================================================
   横スクロールCTAカード（採用情報など青いカード）の装飾
   余白が寂しいので、サイト調の円デコを重ねて見栄えUP（スマホのみ）
   ============================================================ */
body.nr-mob #nr-shell a[style*="flex: 0 0 300px"][style*="var(--accent)"] {
  position: relative; overflow: hidden;
  box-shadow: 0 10px 26px rgba(0,60,120,0.18);
}
body.nr-mob #nr-shell a[style*="flex: 0 0 300px"][style*="var(--accent)"]::after {
  content: ""; position: absolute; right: -46px; bottom: -46px;
  width: 168px; height: 168px; border: 2px solid rgba(255,255,255,0.20);
  border-radius: 50%; pointer-events: none;
}
body.nr-mob #nr-shell a[style*="flex: 0 0 300px"][style*="var(--accent)"]::before {
  content: ""; position: absolute; right: 26px; top: 30px;
  width: 78px; height: 78px; background: rgba(255,255,255,0.10);
  border-radius: 50%; pointer-events: none;
}
/* オレンジの丸矢印を少し大きく＋ふわっと動かして視線誘導 */
@media (prefers-reduced-motion: no-preference) {
  body.nr-mob #nr-shell a[style*="flex: 0 0 300px"][style*="var(--accent)"] [style*="border-radius: 50%"][style*="--orange"],
  body.nr-mob #nr-shell a[style*="flex: 0 0 300px"][style*="var(--accent)"] [style*="background: var(--orange)"] {
    animation: nr-arrowpulse 2.4s ease-in-out infinite;
  }
}
@keyframes nr-arrowpulse {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(6px); }
}

/* ============================================================
   フォーム送信完了メッセージ／制作イメージ注記
   ============================================================ */
.nr-thanks {
  padding: 34px 22px; text-align: center;
  font-size: 15px; line-height: 2; color: #3a434c;
}
.nr-thanks strong { display: block; font-size: 19px; color: #0077cc; margin-bottom: 8px; }
.nr-demo-note { font-size: 11px; color: #98a2ab; margin: 6px 0 4px; line-height: 1.7; }

/* ============================================================
   追従CTAカード（新デザイン：白ベース＋オレンジ見出し）
   ✕で消すのではなく右へ収納⇄タブで復帰（アニメ付き・PC/スマホ共通）
   JSが #nr-cta を生成。旧ポップアップ（z-index:80）は置換のため非表示。
   ============================================================ */
#nr-shell [style*="position: fixed"][style*="z-index: 80"] { display: none !important; }

#nr-cta {
  position: fixed; right: 0; bottom: 22px; z-index: 5000;
  pointer-events: none;
  font-family: "Noto Sans JP", -apple-system, sans-serif;
}
#nr-cta .nr-cta-card {
  pointer-events: auto;
  width: min(352px, calc(100vw - 28px));
  margin-right: 14px;
  background: #fff; border-radius: 16px;
  box-shadow: 0 18px 44px rgba(15, 30, 50, 0.18);
  padding: 22px 22px 20px; position: relative;
  transform: translateX(0) translateY(0); opacity: 1;
  transition: transform 0.5s cubic-bezier(0.2, 0.7, 0.2, 1), opacity 0.4s ease;
}
/* 登場前（下からふわっと） */
#nr-cta.nr-pre .nr-cta-card { transform: translateY(26px); opacity: 0; }
/* 収納時（右へスライドアウト） */
#nr-cta.nr-closed .nr-cta-card {
  transform: translateX(calc(100% + 28px)); opacity: 0; pointer-events: none;
}

/* しまうボタン（右上・矢印） */
/* バナー画像カード：余白なしで画像をそのまま見せる（全幅で余白ゼロを強制） */
#nr-cta .nr-cta-card.nr-cta-imgcard { padding: 0 !important; overflow: hidden; }
#nr-cta .nr-cta-bannerlink { display: block; cursor: pointer; }
#nr-cta .nr-cta-banner {
  display: block; width: 100%; height: auto;
  transition: transform 0.35s cubic-bezier(0.2, 0.7, 0.2, 1);
}
#nr-cta .nr-cta-bannerlink:hover .nr-cta-banner { transform: scale(1.02); }

#nr-cta .nr-cta-min {
  position: absolute; top: 10px; right: 10px; width: 30px; height: 30px;
  border: 0; border-radius: 50%; background: rgba(255, 255, 255, 0.92); color: #5a646e;
  box-shadow: 0 2px 8px rgba(15, 30, 50, 0.18);
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: background 0.2s; z-index: 2;
}
#nr-cta .nr-cta-min:hover { background: #e6eaee; }
#nr-cta .nr-cta-min svg { width: 14px; height: 14px; display: block; }

#nr-cta .nr-cta-logo { height: 24px; width: auto; display: block; margin-bottom: 14px; }
#nr-cta .nr-cta-h { margin: 0 0 10px; font-weight: 900; font-size: 21px; line-height: 1.35; color: #222; }
#nr-cta .nr-cta-h em { font-style: normal; display: block; color: #ff9900; font-size: 26px; }
#nr-cta .nr-cta-s { margin: 0 0 16px; font-size: 13px; line-height: 1.8; color: #4a545e; }
#nr-cta .nr-cta-row { display: flex; gap: 10px; align-items: stretch; }
#nr-cta .nr-cta-btn {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px;
  background: #ff9900; color: #fff; text-decoration: none;
  font-weight: 700; font-size: 14px; border-radius: 10px; padding: 13px 10px;
  cursor: pointer; transition: background 0.2s, transform 0.2s;
}
#nr-cta .nr-cta-btn:hover { background: #ef8e00; transform: translateY(-1px); }
#nr-cta .nr-cta-badge {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  border: 1.5px solid #e3e7eb; border-radius: 10px; padding: 6px 12px;
  font-size: 11px; color: #4a545e; line-height: 1.3; white-space: nowrap;
}
#nr-cta .nr-cta-badge b { font-size: 16px; color: #222; }

/* 収納タブ（画面右端に縦書きで待機） */
#nr-cta .nr-cta-tab {
  pointer-events: auto;
  position: absolute; right: 0; bottom: 0;
  border: 0; cursor: pointer;
  background: #ff9900; color: #fff;
  font-weight: 700; font-size: 13px; letter-spacing: 0.14em;
  writing-mode: vertical-rl; padding: 16px 11px;
  border-radius: 12px 0 0 12px;
  box-shadow: -6px 8px 20px rgba(15, 30, 50, 0.16);
  transform: translateX(102%);
  transition: transform 0.45s cubic-bezier(0.2, 0.7, 0.2, 1) 0.05s, background 0.2s;
}
#nr-cta.nr-closed .nr-cta-tab { transform: translateX(0); transition-delay: 0.18s; }
#nr-cta .nr-cta-tab:hover { background: #ef8e00; }

@media (max-width: 480px) {
  #nr-cta { bottom: 14px; }
  #nr-cta .nr-cta-card { margin-right: 12px; padding: 20px 18px 18px; }
  #nr-cta .nr-cta-h { font-size: 19px; }
  #nr-cta .nr-cta-h em { font-size: 24px; }
}
@media (prefers-reduced-motion: reduce) {
  #nr-cta .nr-cta-card, #nr-cta .nr-cta-tab { transition: none !important; }
}

/* ============================================================
   ABOUT図解シーン：一度組み上がったら生き続ける（PC・スマホ共通）
   元の11秒リセットループ（nf-assemble/nf-draw/nf-mock/nf-dot）を
   「登場1回＋常時の生きた動き」に上書き。JSが .nf-* クラスを付与。
   ============================================================ */

/* カード：ブラーからふわっと一度だけ登場（transformは浮遊側に譲る） */
.nf-scene .nf-card {
  animation: nf-cardin 1.1s cubic-bezier(0.2, 0.7, 0.2, 1) var(--edel, 0s) both !important;
}
@keyframes nf-cardin {
  from { opacity: 0; filter: blur(6px); margin-top: 18px; }
  to   { opacity: 1; filter: blur(0);  margin-top: 0; }
}

/* 浮遊：既存キーフレームのまま周期・位相だけバラして有機的に */
.nf-scene .nf-floaty {
  animation-duration: var(--fdur, 6s) !important;
  animation-delay: var(--fdel, 0s) !important;
}

/* 完成サイトのモック：登場1回＋ごくゆるい浮遊 */
.nf-scene .nf-mockup {
  animation: nf-cardin 1.2s cubic-bezier(0.2, 0.7, 0.2, 1) 0.55s both,
             nf-mockfloat 8.5s ease-in-out 1.8s infinite !important;
}
@keyframes nf-mockfloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-5px); }
}

/* ANALYTICSのドーナツ等：消えずに定着 */
.nf-scene .nf-anx { animation: nf-cardin 0.9s ease 0.5s both !important; }

/* 点線：フェードで現れて、以降はサイト方向へ流れ続ける */
.nf-scene .nf-line {
  stroke-dasharray: 0.016 0.022 !important;
  animation: nf-linein 0.9s ease var(--ldel, 0s) both,
             nf-lineflow 7s linear infinite !important;
}
@keyframes nf-linein { from { opacity: 0; } to { opacity: 0.85; } }
@keyframes nf-lineflow { from { stroke-dashoffset: 0; } to { stroke-dashoffset: -0.76; } }
.nf-scene.nf-rev .nf-line { animation-name: nf-linein, nf-lineflow-r !important; }
@keyframes nf-lineflow-r { from { stroke-dashoffset: 0; } to { stroke-dashoffset: 0.76; } }

/* 光の粒：線に沿って途切れず流入 */
.nf-scene .nf-pdot {
  animation: nf-pmove var(--pdur, 4s) linear var(--pdel, 0s) infinite !important;
}
@keyframes nf-pmove {
  0%   { offset-distance: 0%;   opacity: 0; }
  10%  { opacity: 1; }
  88%  { opacity: 1; }
  100% { offset-distance: 100%; opacity: 0; }
}
.nf-scene.nf-rev .nf-pdot { animation-name: nf-pmove-r !important; }
@keyframes nf-pmove-r {
  0%   { offset-distance: 100%; opacity: 0; }
  10%  { opacity: 1; }
  88%  { opacity: 1; }
  100% { offset-distance: 0%;   opacity: 0; }
}

/* 集約点：静かなパルス */
.nf-hub {
  position: absolute; width: 10px; height: 10px; margin: -5px 0 0 -5px;
  border-radius: 50%; background: #0b83d9; pointer-events: none;
}
.nf-hub::before {
  content: ""; position: absolute; inset: -4px; border-radius: 50%;
  border: 2px solid rgba(11, 131, 217, 0.4);
  animation: nf-hubpulse 2.8s ease-out infinite;
}
@keyframes nf-hubpulse {
  0%   { transform: scale(0.5); opacity: 0.9; }
  70%  { transform: scale(2.0); opacity: 0; }
  100% { transform: scale(2.0); opacity: 0; }
}

/* 動きを減らす設定の方へ：即時表示・常時アニメ停止 */
@media (prefers-reduced-motion: reduce) {
  .nf-scene .nf-card, .nf-scene .nf-mockup, .nf-scene .nf-anx { animation: none !important; opacity: 1 !important; filter: none !important; }
  .nf-scene .nf-line { animation: none !important; opacity: 0.85 !important; }
  .nf-scene .nf-pdot, .nf-hub::before { animation: none !important; }
}

/* ============================================================
   お客様の声（VOICE）：横に流れ続けるループ（PC・スマホ共通）
   JSが元の3カードを複製して .nr-voicemarq / .nr-vtrack を生成
   ============================================================ */
.nr-voicemarq {
  overflow: hidden;
  margin: 6px -20px 0;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.nr-vtrack {
  display: flex; gap: 16px; width: max-content;
  padding: 6px 0 12px;
  animation: nr-vmarq 55s linear infinite;
}
.nr-voicemarq:hover .nr-vtrack,
.nr-voicemarq:active .nr-vtrack { animation-play-state: paused; }
.nr-vcard { flex: 0 0 300px; box-sizing: border-box; position: relative; overflow: hidden; }
@keyframes nr-vmarq { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* カード装飾：右上のドットグリッド＋右下のふんわりサークル */
.nr-vcard::before {
  content: ""; position: absolute; top: 24px; right: 24px;
  width: 62px; height: 44px; pointer-events: none;
  background-image: radial-gradient(rgba(0, 119, 204, 0.32) 1.6px, transparent 1.6px);
  background-size: 13px 13px; opacity: 0.6;
}
.nr-vcard::after {
  content: ""; position: absolute; right: -36px; bottom: -36px;
  width: 116px; height: 116px; border-radius: 50%; pointer-events: none;
  border: 2px solid rgba(0, 119, 204, 0.10);
  background: radial-gradient(circle at 32% 32%, rgba(255, 153, 0, 0.10), transparent 62%);
}

/* 業種アイコン入りアバター */
.nr-vavatar {
  width: 48px !important; height: 48px !important; flex: 0 0 48px;
  border-radius: 50% !important; background: #e9f2fc !important;
  display: flex !important; align-items: center; justify-content: center;
  position: relative;
}
.nr-vavatar svg { width: 27px; height: 27px; display: block; }
@media (min-width: 769px) {
  .nr-voicemarq { margin: 6px -44px 0; }
  .nr-vtrack { gap: 26px; }
  .nr-vcard { flex: 0 0 380px; }
}
@media (prefers-reduced-motion: reduce) { .nr-vtrack { animation: none; } }

/* ============================================================
   フッター前のCTA 2ボタン（サービス資料DL / 採用情報）
   ボタンだと分かる装飾：矢印サークル・影・ホバーで浮く（PC・スマホ共通）
   ============================================================ */
#nr-shell .nr-cta {
  aspect-ratio: auto !important;
  min-height: 128px;
  border-radius: 16px !important;
  padding: 26px 96px 26px 32px !important;
  box-shadow: 0 10px 26px rgba(0, 40, 90, 0.12);
  transition: transform 0.25s ease, box-shadow 0.25s ease !important;
}
#nr-shell .nr-cta:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 18px 36px rgba(0, 40, 90, 0.18);
}
/* 右側の丸矢印（ボタンらしさの要） */
#nr-shell .nr-cta::after {
  content: "›";
  position: absolute; right: 26px; top: 50%;
  transform: translateY(-50%);
  width: 46px; height: 46px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 24px; font-weight: 700; line-height: 1;
  background: var(--orange, #ff9900); color: #fff;
  box-shadow: 0 4px 12px rgba(255, 153, 0, 0.4);
  transition: transform 0.25s ease;
}
#nr-shell .nr-cta:hover::after { transform: translateY(-50%) translateX(4px); }
/* 装飾サークル */
#nr-shell .nr-cta::before {
  content: ""; position: absolute; right: -34px; top: -44px;
  width: 130px; height: 130px; border-radius: 50%;
  pointer-events: none;
}
/* 資料DL：ブルーのグラデーション */
#nr-shell .nr-cta-doc { background: linear-gradient(120deg, #0b83d9, #005fa8) !important; }
#nr-shell .nr-cta-doc::before { border: 2px solid rgba(255, 255, 255, 0.22); }
/* 採用：白ベース＋オレンジ枠 */
#nr-shell .nr-cta-recruit { background: #fff !important; border: 2px solid var(--orange, #ff9900); }
#nr-shell .nr-cta-recruit::before { background: rgba(255, 153, 0, 0.08); }

@media (max-width: 768px) {
  #nr-shell .nr-cta { min-height: 106px; padding: 20px 84px 20px 22px !important; }
  #nr-shell .nr-cta::after { width: 40px; height: 40px; right: 20px; font-size: 21px; }
}

/* ============================================================
   セクションタイトル：スマホで拡大＋スクロールで登場アニメ
   （JSが .nr-eyebrow / .nr-heading / .nr-rise を付与）
   ============================================================ */
body.nr-mob .nr-eyebrow { font-size: 17px !important; letter-spacing: 0.2em !important; }
body.nr-mob .nr-heading { font-size: 32px !important; line-height: 1.34 !important; text-wrap: pretty; }

@media (prefers-reduced-motion: no-preference) {
  body.nr-mob .nr-rise {
    opacity: 0; transform: translateY(16px);
    transition: opacity .9s cubic-bezier(.2,.7,.2,1), transform .9s cubic-bezier(.2,.7,.2,1);
    will-change: opacity, transform;
  }
  body.nr-mob .nr-rise.nr-in { opacity: 1; transform: none; }
}

/* ============================================================
   スマホ実機検証で出た指摘の修正（375px幅で計測）
   ① 本文が13px前後 → 日本語は読みづらいので15pxへ
   ② リンク／ボタンのタップ領域が19〜30px → 44px以上を確保
   ============================================================ */

@media (max-width: 768px) {

  /* --- ① 本文テキスト：line-heightが1.8以上の<p>＝読ませる文章。12〜14pxを15pxへ --- */
  #nr-shell p[style*="font-size: 12px"][style*="line-height: 1.8"],
  #nr-shell p[style*="font-size: 12.5px"][style*="line-height: 1.8"],
  #nr-shell p[style*="font-size: 13px"][style*="line-height: 1.8"],
  #nr-shell p[style*="font-size: 13px"][style*="line-height: 1.9"],
  #nr-shell p[style*="font-size: 14px"][style*="line-height: 1.9"],
  #nr-shell p[style*="font-size: 14px"][style*="line-height: 1.95"],
  #nr-shell p[style*="font-size: 14px"][style*="line-height: 2"] {
    font-size: 15px !important;
    line-height: 1.85 !important;
  }

  /* 実績カードのタグチップ：写真の上に乗る11pxは潰れるので12pxへ */
  .nr-mobshowcase .nr-card .nr-chip { font-size: 12px; padding: 4px 10px; }

  /* --- ② フッターのリンク：高さ19pxで指で押しにくい → 44px確保 --- */
  #nr-shell footer a {
    display: inline-flex !important;
    align-items: center;
    min-height: 44px;
  }
  /* リンクが縦に詰まりすぎないよう、行間ぶんは親のgapで吸収する */
  #nr-shell footer [style*="display: grid"] { row-gap: 4px !important; }

  /* ヒーローの「VIEW SERVICE」：高さ14px → 44px */
  #nr-shell a.scp2 {
    display: inline-flex !important;
    align-items: center;
    min-height: 44px;
  }
}

/* ハンバーガー：42px→44px（iOS/Androidの推奨タップ最小サイズ） */
#nr-mobbtn { width: 44px; height: 44px; }

/* 追従CTAの「しまう」ボタン：見た目は30pxの丸のまま、当たり判定だけ44px四方に広げる。
   border-radius:50% にすると当たり判定も円形になり四隅が抜けるので、ここは角丸なしの四角にする。 */
#nr-cta .nr-cta-min::after {
  content: "";
  position: absolute;
  inset: -7px;          /* 30px + 7px*2 = 44px */
}

/* --- ページ別に出た残りのタップ領域（375px幅で計測） --- */
@media (max-width: 768px) {

  /* 制作実績のカテゴリフィルタ：高さ38px → 44px */
  #nr-shell button[style*="border-radius: 40px"][style*="font-size: 13px"] { min-height: 44px; }

  /* 「Googleマップで見る」など小さいテキストリンク：高さ19px → 44px */
  #nr-shell a[style*="display: inline-flex"][style*="font-size: 13px"] { min-height: 44px; }

  /* 同意チェックボックス：18px角は指で押せないので22pxへ＋ラベル全体を44pxの当たり判定に */
  #nr-shell input[type="checkbox"] { width: 22px !important; height: 22px !important; flex: 0 0 22px; }
  #nr-shell label:has(input[type="checkbox"]) { min-height: 44px; align-items: center; }
  /* 同意文中の「プライバシーポリシー」リンク：インラインのまま当たり判定だけ広げる */
  #nr-shell label:has(input[type="checkbox"]) a { display: inline-block; padding: 12px 0; }
}

/* フォーム入力欄は16px固定。
   iOS Safariは16px未満の入力欄にフォーカスすると画面を自動ズームしてしまい、
   ズームが戻らずレイアウトが崩れて見える（PCでは再現しないので見落としやすい）。 */
#nr-shell input:not([type="checkbox"]):not([type="radio"]),
#nr-shell select,
#nr-shell textarea { font-size: 16px !important; }

/* ============================================================
   コントラスト比の是正（WCAG AA）
   ブランドカラーのオレンジ #ff9900 は白文字だと 2.14:1 で不合格（要4.5:1）。
   オレンジ自体は変えず、その上に乗る文字を濃紺 #12212f にして 7.64:1 にする。
   ============================================================ */
:root { --on-orange: #12212f; }

/* インラインstyleで background: var(--orange) が当たっているボタン群
   （「無料相談はこちら」「CONTACT」など）。インライン指定に勝つため !important */
#nr-shell a[style*="background: var(--orange)"],
#nr-shell button[style*="background: var(--orange)"] { color: var(--on-orange) !important; }
/* 中の文字spanも親から継承させる */
#nr-shell a[style*="background: var(--orange)"] span:not([style*="background"]),
#nr-shell button[style*="background: var(--orange)"] span:not([style*="background"]) { color: inherit !important; }
/* 白い線で描かれた「>」矢印も文字色に合わせる（白のままだと浮くため） */
#nr-shell a[style*="background: var(--orange)"] span[style*="border-top"] {
  border-top-color: var(--on-orange) !important;
  border-right-color: var(--on-orange) !important;
}

/* ハンバーガーメニュー最下部のオレンジCTA */
#nr-mobmenu .nr-mobitem:last-child { color: var(--on-orange); }
/* 追従CTAの収納タブ・ボタン */
#nr-cta .nr-cta-tab,
#nr-cta .nr-cta-btn { color: var(--on-orange); }
/* フッター前CTAカードの丸矢印 */
#nr-shell .nr-cta::after { color: var(--on-orange); }


/* ============================================================
   2026-09-10 リリース前チェックリスト再検品での修正
   ============================================================ */

/* コントラスト：薄いグレーの小さい文字（©表記・受付時間・社名・補足ラベル）は
   白/淡グレー背景で2.3〜3.7しか無かったので #5f6873（白5.65 / #f4f5f6 5.18）へ */
#nr-shell [style*="color: rgb(124, 133, 141)"],
#nr-shell [style*="color: rgb(138, 147, 156)"],
#nr-shell [style*="color: rgb(154, 163, 173)"] { color: #5f6873 !important; }

/* オレンジ背景の小さい文字バッジ（フォームの「必須」など）も白→濃紺（2.14→7.64） */
#nr-shell span[style*="background: var(--orange)"][style*="font-size"] { color: var(--on-orange) !important; }

/* キーボード操作時のフォーカス枠。ボタン類にインラインで outline:none が付いているため !important で上書き */
#nr-shell a:focus-visible, #nr-shell button:focus-visible,
#nr-shell input:focus-visible, #nr-shell select:focus-visible, #nr-shell textarea:focus-visible,
#nr-mobmenu a:focus-visible, #nr-mobbtn:focus-visible,
#nr-cta a:focus-visible, #nr-cta button:focus-visible {
  outline: 3px solid var(--accent, #0077cc) !important;
  outline-offset: 2px !important;
}