/* ============================================================
   Ki:CODE 実画面の表示用（既存のC-SPデザインの色・罫線・角丸に合わせた追加部品）
   ============================================================ */

/* 実画面フレーム（既存の mockup-browser と同じ見た目） */
.shot{margin:0;background:var(--bg2,#080d1a);border:1px solid rgba(0,212,255,0.18);border-radius:16px;overflow:hidden;box-shadow:0 30px 100px rgba(0,0,0,0.55);position:relative}
.shot-bar{background:rgba(0,212,255,0.05);padding:11px 16px;display:flex;align-items:center;gap:8px;border-bottom:1px solid rgba(255,255,255,0.07)}
.shot-bar .sd{width:9px;height:9px;border-radius:50%;flex-shrink:0}
.shot-bar .sd.r{background:#ff5f57}.shot-bar .sd.y{background:#febc2e}.shot-bar .sd.g{background:#28c840}
.shot-url{flex:1;min-width:0;background:rgba(255,255,255,0.04);border-radius:6px;padding:5px 12px;font-size:10px;color:rgba(255,255,255,0.4);letter-spacing:.05em;margin:0 10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-family:var(--font-jp,'Noto Sans JP',sans-serif)}
.shot-tag{font-size:9px;font-weight:700;letter-spacing:.12em;color:var(--accent,#00d4ff);display:flex;align-items:center;gap:5px;white-space:nowrap}
.shot-tag::before{content:'';width:5px;height:5px;border-radius:50%;background:var(--accent,#00d4ff);animation:shotPulse 1.8s infinite}
@keyframes shotPulse{0%,100%{opacity:1}50%{opacity:.3}}
.shot-view{display:block;position:relative;cursor:zoom-in;background:#0a1630}
.shot-view img{display:block;width:100%;height:auto}
.shot-view.crop{overflow:hidden}
.shot-view.crop img{width:100%;height:100%;object-fit:cover;object-position:top left}
.shot-view::after{content:'クリックで拡大';position:absolute;right:12px;bottom:12px;font-size:10px;letter-spacing:.08em;color:#fff;background:rgba(4,6,13,0.78);border:1px solid rgba(0,212,255,0.3);padding:5px 10px;border-radius:999px;opacity:0;transition:opacity .2s;font-family:var(--font-jp,'Noto Sans JP',sans-serif)}
.shot-view:hover::after,.shot-view:focus-visible::after{opacity:1}
.shot-view:focus-visible{outline:2px solid var(--accent,#00d4ff);outline-offset:-2px}
.shot-cap{padding:14px 18px 16px;border-top:1px solid rgba(255,255,255,0.07);font-size:12px;color:var(--gray,#7a8899);line-height:1.8;font-family:var(--font-jp,'Noto Sans JP',sans-serif);font-weight:300}
.shot-cap b{color:#fff;font-weight:700;display:block;font-size:13px;margin-bottom:2px}

/* 実画面ラベル（「実際の画面」） */
.real-badge{display:inline-flex;align-items:center;gap:8px;background:rgba(0,212,255,0.08);border:1px solid rgba(0,212,255,0.28);border-radius:999px;padding:5px 14px;font-size:10px;font-weight:700;letter-spacing:.16em;color:var(--accent,#00d4ff)}

/* 3枚並び */
.shot-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:44px}
.shot-grid .shot-view.crop{aspect-ratio:16/10}
.shot-grid .shot{box-shadow:0 20px 60px rgba(0,0,0,0.45);transition:transform .3s,border-color .3s}
.shot-grid .shot:hover{transform:translateY(-4px);border-color:rgba(0,212,255,0.4)}

/* 画面ツアー（タブ） */
.tour{margin-top:44px;display:grid;grid-template-columns:260px 1fr;gap:28px;align-items:start}
.tour-tabs{display:flex;flex-direction:column;gap:6px;position:sticky;top:110px}
.tour-tab{all:unset;box-sizing:border-box;cursor:pointer;display:flex;gap:12px;align-items:flex-start;padding:14px 16px;border:1px solid rgba(255,255,255,0.07);border-radius:12px;background:rgba(255,255,255,0.015);transition:border-color .2s,background .2s}
.tour-tab:hover{border-color:rgba(0,212,255,0.25)}
.tour-tab[aria-selected="true"]{border-color:rgba(0,212,255,0.45);background:rgba(0,212,255,0.06)}
.tour-tab:focus-visible{outline:2px solid var(--accent,#00d4ff);outline-offset:2px}
.tour-tab .tn{font-size:11px;font-weight:800;letter-spacing:.1em;color:var(--accent,#00d4ff);min-width:22px;padding-top:1px}
.tour-tab .tt{font-size:13px;font-weight:700;color:#fff;font-family:var(--font-jp,'Noto Sans JP',sans-serif);line-height:1.4}
.tour-tab .ts{display:block;font-size:10px;font-weight:700;letter-spacing:.14em;color:var(--gray,#7a8899);margin-top:3px;font-family:var(--font-display,'Exo 2',sans-serif)}
.tour-panel[hidden]{display:none}
.tour-panel .shot-cap{font-size:13px}

/* ライトボックス */
.lightbox{position:fixed;inset:0;z-index:2000;background:rgba(2,4,10,0.92);backdrop-filter:blur(6px);display:none;align-items:flex-start;justify-content:center;padding:64px 24px 24px;overflow:auto;cursor:zoom-out}
.lightbox.open{display:flex}
.lightbox img{max-width:min(1452px,100%);height:auto;border-radius:12px;border:1px solid rgba(0,212,255,0.25);box-shadow:0 30px 100px rgba(0,0,0,0.6)}
.lightbox-close{position:fixed;top:18px;right:22px;width:40px;height:40px;border-radius:50%;border:1px solid rgba(255,255,255,0.2);background:rgba(4,6,13,0.8);color:#fff;font-size:20px;line-height:1;cursor:pointer}

/* 申請書についての常時表示（法務） */
.filing-note{display:flex;gap:12px;align-items:flex-start;border:1px solid rgba(0,212,255,0.18);background:rgba(0,212,255,0.04);border-radius:12px;padding:14px 18px;font-size:12px;line-height:1.8;color:rgba(255,255,255,0.72);font-family:var(--font-jp,'Noto Sans JP',sans-serif);font-weight:300}
.filing-note svg{width:16px;height:16px;stroke:var(--accent,#00d4ff);fill:none;stroke-width:1.6;flex-shrink:0;margin-top:3px}
.filing-note b{color:#fff;font-weight:700}

/* 注記 */
.fine{font-size:11px;color:var(--gray,#7a8899);line-height:1.85;font-family:var(--font-jp,'Noto Sans JP',sans-serif);font-weight:300}
.status-pill{display:inline-flex;align-items:center;gap:6px;font-size:9px;font-weight:700;letter-spacing:.12em;padding:3px 10px;border-radius:999px;border:1px solid rgba(255,170,0,0.3);color:#ffb84d;background:rgba(255,170,0,0.06);vertical-align:middle}

@media (max-width:1100px){
  .tour{grid-template-columns:1fr}
  .tour-tabs{position:static;flex-direction:row;overflow-x:auto;padding-bottom:6px;scroll-snap-type:x mandatory}
  .tour-tab{flex:0 0 auto;scroll-snap-align:start}
  .tour-tab .ts{display:none}
}
@media (max-width:900px){
  .shot-grid{grid-template-columns:1fr}
}
@media (max-width:560px){
  .shot-url{display:none}
  .shot-bar{justify-content:flex-start}
  .shot-tag{margin-left:auto}
  .shot-cap{padding:12px 14px 14px}
  .lightbox{padding:56px 8px 8px}
}
@media (prefers-reduced-motion:reduce){.shot-tag::before{animation:none}.shot-grid .shot:hover{transform:none}}

/* ── スマホ表示の補正（このサイトで使っている既存クラスの段組みを1列に） ── */
@media (max-width:1024px){
  .feat-split,.report-split{grid-template-columns:1fr !important;gap:32px !important}
  .how-grid{grid-template-columns:1fr 1fr !important}
  .contact-wrap{grid-template-columns:1fr !important;gap:40px !important}
}
@media (max-width:768px){
  section{padding-left:20px;padding-right:20px}
  .lp-hero{padding:130px 20px 64px}
  .lp-hero h1{font-size:clamp(52px,16vw,80px)}
  .lp-stats{flex-wrap:wrap;gap:20px 32px}
  .lp-cta{margin:56px 16px 72px;padding:44px 22px}
  .lp-cta h2{font-size:clamp(26px,8vw,40px)}
  .lp-cta p br{display:none}
  .page-hero{padding:130px 20px 64px}
  .contact-wrap{padding:56px 20px 96px}
  .compare-wrap{margin-left:-20px;margin-right:-20px;padding:0 20px}
  table.compare{min-width:560px}
  .info-table th{width:96px;padding:14px 10px 14px 0}
  .info-table td{padding:14px 0}
  .biz-visual .shot{margin-top:8px}
}
@media (max-width:560px){
  .how-grid{grid-template-columns:1fr !important}
  .form-row{grid-template-columns:1fr !important}
}