/* 最終確定ロックの「お試し」（2026-10-07）。
   プラグインのコードは使わず、サイト用に一から書いた縮小版。kintone のレコード画面と、本物の文言に合わせている */
.fd-wide { padding: 0 4%; position: relative; z-index: 2; }
.fd { font-family: "メイリオ", Meiryo, "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Noto Sans JP", sans-serif;
  font-size: 14px; color: #333; letter-spacing: 0; }
.fd *, .fd *::before, .fd *::after { box-sizing: border-box; }

/* お試しの操作（kintone の外） */
.fd-ctl { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-bottom: 12px; font-size: 13px; color: #5a6468; }
.fd-ctl b { color: #34495e; }
.fd-seg { display: inline-flex; border: 1px solid #c9d2d6; border-radius: 6px; overflow: hidden; }
.fd-seg button { border: 0; background: #fff; padding: 6px 14px; font: inherit; font-size: 13px; cursor: pointer; color: #5a6468; }
.fd-seg button + button { border-left: 1px solid #c9d2d6; }
.fd-seg button.is-on { background: #34495e; color: #fff; }
.fd-ctl .sp { flex: 1; }
.fd-reset { border: 1px solid #c9d2d6; background: #fff; border-radius: 6px; padding: 6px 12px; font: inherit; font-size: 13px; cursor: pointer; color: #5a6468; }
.fd-steps { list-style: none; margin: 0 0 14px; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 13px; color: #5a6468; }
.fd-steps li { display: flex; align-items: center; gap: 6px; }
.fd-steps li i { font-style: normal; width: 20px; height: 20px; border-radius: 50%; background: #e8eef1; color: #34495e; display: inline-grid; place-items: center; font-size: 11px; font-weight: 700; }
.fd-steps li.is-done i { background: #3498db; color: #fff; }

/* kintone の画面 */
.fd-k { position: relative; background: #f5f5f5; border: 1px solid #e3e7e8; border-radius: 14px; overflow: hidden; box-shadow: 0 18px 48px rgba(31, 45, 61, .08); }
.fd-top { display: flex; align-items: center; gap: 12px; height: 48px; padding: 0 16px; background: #fc0; }
.fd-top .logo { display: flex; align-items: center; gap: 6px; font-weight: 700; font-size: 18px; color: #333; letter-spacing: .02em; }
.fd-top .logo svg { width: 26px; height: 20px; }
.fd-app { display: flex; align-items: center; gap: 10px; height: 46px; padding: 0 16px; background: #d8dcdd; font-weight: 700; font-size: 14px; }
.fd-app i { width: 30px; height: 30px; border-radius: 6px; background: #6aa5d8; display: grid; place-items: center; }
.fd-app i::before { content: ""; width: 14px; height: 10px; border-top: 2px solid #fff; border-bottom: 2px solid #fff; box-shadow: inset 0 4px 0 -2px transparent; }
.fd-banner { margin: 8px 12px 0; padding: 8px 12px; background: #fef3c7; color: #7c2d12; border: 1px solid #f59e0b; border-radius: 4px; font-size: 13px; font-weight: 700; }
.fd-crumb { display: flex; align-items: center; gap: 0; height: 44px; padding: 0 12px; background: #fff; border-bottom: 1px solid #e3e7e8; font-size: 13px; color: #888; margin-top: 8px; overflow: hidden; white-space: nowrap; }
.fd-crumb span { padding: 0 14px; position: relative; }
.fd-crumb span + span::before { content: "›"; position: absolute; left: -4px; color: #c5c9cb; }
.fd-crumb a { color: #3498db; }
.fd-bar { display: flex; align-items: center; justify-content: flex-end; gap: 10px; height: 64px; padding: 0 20px; background: #fff; border-bottom: 1px solid #e3e7e8; }
.fd-bar .ic { width: 40px; height: 40px; border-radius: 50%; border: 0; background: none; display: grid; place-items: center; color: #8a9296; cursor: default; }
.fd-bar .ic svg { width: 22px; height: 22px; }
.fd-bar .ic.edit { cursor: pointer; color: #5a6468; }
.fd-bar .ic.edit:hover { background: #eef5ff; color: #3498db; }
.fd-bar .ic.edit.hint { box-shadow: 0 0 0 3px rgba(52, 152, 219, .35); animation: fd-pulse 1.4s ease-in-out infinite; }
@keyframes fd-pulse { 50% { box-shadow: 0 0 0 7px rgba(52, 152, 219, .12); } }
.fd-btn { height: 40px; min-width: 110px; padding: 0 18px; border-radius: 4px; font: inherit; font-size: 14px; cursor: pointer; border: 1px solid #e3e7e8; background: #fff; color: #3498db; }
.fd-btn--save { background: #3498db; border-color: #3498db; color: #fff; }
.fd-btn--save:hover { background: #217dbb; }

.fd-body { padding: 18px 20px 26px; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px 18px; }
.fd-f label, .fd-f .lb { display: block; font-size: 13px; color: #333; margin-bottom: 6px; }
.fd-f .v { min-height: 32px; padding: 6px 9px; background: #eee; border: 1px solid #e3e3e3; color: #333; line-height: 1.5; word-break: break-all; }
.fd-f .v.num { text-align: right; }
.fd-f input[type=text], .fd-f input[type=number], .fd-f input[type=date], .fd-f textarea { width: 100%; height: 34px; padding: 4px 8px; border: 1px solid #e3e3e3; box-shadow: inset 0 1px 2px rgba(0,0,0,.08); font: inherit; font-size: 14px; background: #fff; }
.fd-f textarea { height: 58px; resize: vertical; }
.fd-f input.num { text-align: right; }
.fd-check { display: flex; align-items: center; gap: 8px; min-height: 34px; padding: 4px 10px; border: 1px solid #e3e3e3; background: #fff; cursor: pointer; }
.fd-check input { width: 18px; height: 18px; margin: 0; accent-color: #3498db; cursor: pointer; }
.fd-f.is-finish .fd-check { border-color: #3498db; box-shadow: 0 0 0 2px rgba(52, 152, 219, .18); }
.fd-f.wide { grid-column: span 2; }
@media (max-width: 600px) { .fd-f.wide { grid-column: auto; } }

/* エラー（kintone の赤い知らせ） */
.fd-toast { position: absolute; top: 8px; right: 12px; z-index: 5; width: min(560px, calc(100% - 24px)); background: #e74c3c; color: #fff; border-radius: 4px;
  padding: 14px 44px 14px 18px; box-shadow: 0 8px 24px rgba(0,0,0,.25); font-size: 14px; font-weight: 700; line-height: 1.6; }
.fd-toast b { display: block; font-size: 15px; }
.fd-toast button { position: absolute; top: 10px; right: 10px; width: 26px; height: 26px; border-radius: 50%; border: 0; background: rgba(0,0,0,.18); color: #fff; cursor: pointer; font-size: 14px; }
.fd-toast.ok { background: #2c3e50; font-weight: 400; }
.fd-msg { font-size: 13px; color: #5a6468; margin-top: 10px; min-height: 1.6em; }
.fd-msg b { color: #1f2d3d; }

/* 次にやること（止まったあとの「管理者」への切り替え）を光らせる */
.fd-seg { overflow: visible; }
.fd-seg button.hint { position: relative; background: #fff7e0; color: #7c2d12; font-weight: 700; border-radius: 0 6px 6px 0;
  box-shadow: 0 0 0 2px #f59e0b; animation: fd-glow 1.4s ease-in-out infinite; z-index: 1; }
@keyframes fd-glow { 50% { box-shadow: 0 0 0 2px #f59e0b, 0 0 0 8px rgba(245, 158, 11, .22); } }
.fd-steps li.is-next { color: #7c2d12; font-weight: 700; }
.fd-steps li.is-next i { background: #f59e0b; color: #fff; animation: fd-glow 1.4s ease-in-out infinite; }
.fd-msg b { color: #7c2d12; }
@media (prefers-reduced-motion: reduce) { .fd-seg button.hint, .fd-steps li.is-next i, .fd-bar .ic.edit.hint { animation: none; } }

/* 次にやる操作は、どれも同じオレンジの枠で光らせる（2026-10-07） */
.fd .hl { position: relative; z-index: 1; box-shadow: 0 0 0 3px #fff, 0 0 0 6px #f59e0b !important; animation: fd-ring 1.4s ease-in-out infinite; }
.fd-seg button.hl { background: #fff7e0; color: #7c2d12; font-weight: 700; }
.fd-seg button.hl:first-child { border-radius: 6px 0 0 6px; }
.fd-seg button.hl:last-child { border-radius: 0 6px 6px 0; }
.fd-bar .ic.edit.hl { color: #b45309; background: #fff7e0; }
.fd-check.hl { border-color: #f59e0b !important; background: #fff7e0; font-weight: 700; color: #7c2d12; }
.fd-btn--save.hl { background: #3498db; }
@media (prefers-reduced-motion: reduce) { .fd .hl { animation: none; } }
@keyframes fd-ring { 50% { box-shadow: 0 0 0 3px #fff, 0 0 0 6px #f59e0b, 0 0 0 13px rgba(245, 158, 11, .25); } }

/* 余白を大きめに（2026-10-07） */
.fd-ctl { margin-bottom: 18px; }
.fd-steps { margin-bottom: 22px; gap: 10px 26px; }
.fd-banner { margin: 12px 20px 0; padding: 12px 16px; }
.fd-crumb { height: 52px; padding: 0 20px; margin-top: 12px; }
.fd-bar { height: 76px; padding: 0 28px; gap: 14px; }
.fd-body { padding: 32px 32px 40px; gap: 26px 28px; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.fd-f label, .fd-f .lb { margin-bottom: 8px; }
.fd-f .v { min-height: 38px; padding: 8px 12px; }
.fd-f input[type=text], .fd-f input[type=number], .fd-f input[type=date] { height: 40px; padding: 6px 10px; }
.fd-check { min-height: 40px; padding: 6px 12px; }
.fd-msg { margin-top: 18px; }
.fd-toast { top: 14px; right: 18px; }