/* ============================================================
   NAD System 特設ページ（page-nad.php 専用）
   Claude Design「NAD System.dc.html」（2026-09-11版）準拠。
   角丸ピル＋カードシャドウの新スタイル・アクセントはティール #0e7c86。
   本体レイアウトはテンプレート内のインラインstyle、
   ここには変数・ホバー・出現アニメ・フロー切替・ライトボックス・
   レスポンシブのみを置く。
   ============================================================ */
:root{ --nad-accent:#0e7c86; }

body.mco-nad-body{
  margin:0;
  background:#ffffff;
  color:#0f1216;
  font-family:'Noto Sans JP',sans-serif;
  font-weight:400;
  line-height:normal;
  -webkit-font-smoothing:antialiased;
}
body.mco-nad-body a{ color:var(--nad-accent); text-decoration:none; }
body.mco-nad-body a:hover{ color:#0f1216; }

.nad-wrap{ min-height:100svh; background:#ffffff; overflow-x:clip; }

/* 出現アニメーション */
.nad-rv{ opacity:0; transform:translateY(22px); transition:opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1); }
.nad-rv.on{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){ .nad-rv{ opacity:1; transform:none; transition:none; } }

/* ボタンホバー */
.nad-btn-a{ transition:filter .3s ease, transform .3s ease; }
.nad-btn-a:hover{ filter:brightness(1.1); transform:translateY(-1px); }
.nad-btn-b:hover{ background:#0f1216 !important; color:#ffffff !important; }

/* 数字・英字アクセント用フォント（デザインのHelvetica系スタック） */
.nad-num{ font-family:'Helvetica Neue',Helvetica,'Arial Black',Arial,sans-serif; }

/* 画像スロット（後日差し替え用プレースホルダ） */
.nad-slot{ width:100%; height:100%; display:flex; align-items:center; justify-content:center; background:repeating-linear-gradient(135deg,#eef1f6 0,#eef1f6 12px,#f7f8fb 12px,#f7f8fb 24px); }
.nad-slot span{ font-size:12px; font-weight:700; letter-spacing:0.08em; color:#9aa0a8; padding:0 14px; text-align:center; line-height:1.8; }
.nad-slot img{ width:100%; height:100%; object-fit:cover; display:block; }

/* ---- 提案フロー：スライドショー＋選択カード ---- */
.nad-flow-slide{ position:absolute; inset:0; opacity:0; transition:opacity .45s ease; pointer-events:none; }
.nad-flow-slide.is-active{ opacity:1; pointer-events:auto; }
.nad-flow-card{ background:#ffffff; box-shadow:0 1px 2px rgba(15,18,22,0.04), 0 6px 16px rgba(15,18,22,0.06); padding:18px 18px 20px; display:flex; flex-direction:column; gap:8px; cursor:pointer; transition:box-shadow .3s, background .3s; }
.nad-flow-card.is-active{ background:color-mix(in srgb, var(--nad-accent) 5%, #ffffff); box-shadow:0 0 0 2px var(--nad-accent), 0 12px 28px color-mix(in srgb, var(--nad-accent) 20%, transparent); }

/* ---- ライトボックス（画像クリックで拡大） ---- */
.nad-zoom{ cursor:zoom-in; }
.nad-lightbox{ position:fixed; inset:0; z-index:200; background:rgba(13,17,23,0.92); display:none; align-items:center; justify-content:center; padding:4vh 4vw; cursor:zoom-out; }
.nad-lightbox.is-open{ display:flex; }
.nad-lightbox img{ max-width:100%; max-height:100%; object-fit:contain; box-shadow:0 30px 80px rgba(0,0,0,0.5); }
.nad-lightbox .nad-lightbox-x{ position:absolute; top:18px; right:26px; font-size:34px; font-weight:300; color:#ffffff; line-height:1; cursor:pointer; }

/* ---- レスポンシブ（デザインの ≦820px 指定を移植） ---- */
@media (max-width:820px){
  .nad-nav{ display:none !important; }
  .nad-header .nad-en{ display:none !important; }
  .nad-header .nad-btn-b{ padding:8px 14px !important; font-size:12px !important; }
  .nad-grid3{ grid-template-columns:1fr !important; }
  .nad-flow{ display:flex !important; overflow-x:auto; scroll-snap-type:x mandatory; gap:10px !important; margin:16px -16px 0 !important; padding:4px 16px 10px; -webkit-overflow-scrolling:touch; }
  .nad-flow > div{ flex:0 0 auto; width:106px; scroll-snap-align:start; padding:7px 9px 8px !important; gap:4px !important; justify-content:center; align-items:flex-start; }
  .nad-flow > div > p{ display:none; }
  .nad-flow > div > span{ font-size:9.5px !important; letter-spacing:0.06em !important; padding:2px 7px !important; }
  .nad-flow > div > h3{ font-size:12px !important; line-height:1.35 !important; white-space:nowrap; }
  .nad-flow-label{ display:none !important; }
  .nad-plans-row{ display:flex !important; overflow-x:auto; scroll-snap-type:x mandatory; gap:14px !important; margin:0 -16px !important; padding:4px 16px 12px; -webkit-overflow-scrolling:touch; }
  .nad-plans-row > div{ flex:0 0 86%; scroll-snap-align:center; }
  .nad-koko-box{ flex-direction:column; align-items:flex-start !important; gap:12px !important; }
  .nad-koko{ white-space:normal !important; }
  .nad-hero-wrap{ display:flex; flex-direction:column; }
  .nad-logo-row{ flex-wrap:wrap !important; row-gap:8px; }
  .nad-logo-row > img{ max-width:100% !important; width:min(100%,420px) !important; }
  .nad-hero-a{ order:1; }
  .nad-hero-img{ position:static !important; width:100% !important; margin-top:20px; order:2; }
  .nad-hero-b{ order:3; }
  .nad-core-step{ grid-template-columns:56px 1fr !important; }
  .nad-shot-grid{ grid-template-columns:1fr !important; }
  .nad-ba-grid{ grid-template-columns:1fr !important; }
  .nad-ba-grid > div:last-child{ aspect-ratio:3/2; }
  .nad-kagu-row{ display:flex !important; overflow-x:auto; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; }
  .nad-kagu-row > div{ flex:0 0 82%; scroll-snap-align:center; }
  .nad-kagu-row img{ height:auto !important; }
  .nad-footer-credit{ display:none !important; }
  .nad-shot-hero-cap{ flex-wrap:wrap; }
  .nad-what-grid{ grid-template-columns:1fr !important; }
  .nad-spec3{ grid-template-columns:1fr !important; }
  .nad-cta-row{ flex-direction:column; align-items:stretch !important; }
}