/* ============================================================
   Billスマ LP — style.css
   Tailwind CDN依存を排除した静的CSSファイル
   ============================================================ */

/* ── Reset / Base ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { line-height: 1.5; -webkit-text-size-adjust: 100%; }
body { font-family: 'Noto Sans JP', sans-serif; background-color: #f8fafc; color: #1e293b; }
img, svg { display: block; max-width: 100%; }
a { text-decoration: none; color: inherit; }
table { border-collapse: collapse; }

/* ── Color Variables ── */
:root {
  --slate-50:  #f8fafc;
  --slate-100: #f1f5f9;
  --slate-200: #e2e8f0;
  --slate-300: #cbd5e1;
  --slate-400: #94a3b8;
  --slate-500: #64748b;
  --slate-600: #475569;
  --slate-700: #334155;
  --slate-800: #1e293b;
  --slate-900: #0f172a;
  --blue-50:   #eff6ff;
  --blue-700:  #1d4ed8;
  --blue-800:  #1e40af;
  --blue-900:  #1e3a8a;
  --indigo-50: #eef2ff;
  --orange-50: #fff7ed;
  --orange-300:#fdba74;
  --orange-400:#fb923c;
  --orange-500:#f97316;
  --orange-600:#ea580c;
  --amber-400: #fbbf24;
  --amber-500: #f59e0b;
  --amber-600: #d97706;
  --amber-700: #b45309;
  --red-50:    #fef2f2;
  --red-600:   #dc2626;
  --rose-50:   #fff1f2;
  --teal-50:   #f0fdfa;
  --green-50:  #f0fdf4;
  --purple-50: #faf5ff;
  --yellow-50: #fefce8;
  --white:     #ffffff;
}

/* ============================================================
   Layout Utilities
   ============================================================ */
.max-w-2xl  { max-width: 42rem; }
.max-w-3xl  { max-width: 48rem; }
.max-w-5xl  { max-width: 64rem; }
.max-w-6xl  { max-width: 72rem; }
.max-w-7xl  { max-width: 80rem; }
.mx-auto    { margin-left: auto; margin-right: auto; }
.w-fit      { width: fit-content; }
.w-full     { width: 100%; }
.w-10       { width: 2.5rem; }

/* ── Flexbox ── */
.flex         { display: flex; }
.flex-col     { flex-direction: column; }
.flex-1       { flex: 1 1 0%; }
.flex-wrap    { flex-wrap: wrap; }
.items-center { align-items: center; }
.items-start  { align-items: flex-start; }
.items-end    { align-items: flex-end; }
.justify-between { justify-content: space-between; }
.justify-center  { justify-content: center; }
.self-stretch    { align-self: stretch; }

/* ── Grid ── */
.grid          { display: grid; }
.grid-cols-2   { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* ── Gap ── */
.gap-1  { gap: 0.25rem; }
.gap-2  { gap: 0.5rem; }
.gap-3  { gap: 0.75rem; }
.gap-5  { gap: 1.25rem; }
.gap-6  { gap: 1.5rem; }
.gap-10 { gap: 2.5rem; }

/* ── Padding ── */
.p-2   { padding: 0.5rem; }
.p-5   { padding: 1.25rem; }
.p-6   { padding: 1.5rem; }
.px-2  { padding-left: 0.5rem;  padding-right: 0.5rem; }
.px-3  { padding-left: 0.75rem; padding-right: 0.75rem; }
.px-4  { padding-left: 1rem;    padding-right: 1rem; }
.px-6  { padding-left: 1.5rem;  padding-right: 1.5rem; }
.px-10 { padding-left: 2.5rem;  padding-right: 2.5rem; }
.px-12 { padding-left: 3rem;    padding-right: 3rem; }
.py-1\.5 { padding-top: 0.375rem; padding-bottom: 0.375rem; }
.py-2  { padding-top: 0.5rem;   padding-bottom: 0.5rem; }
.py-2\.5 { padding-top: 0.625rem; padding-bottom: 0.625rem; }
.py-3  { padding-top: 0.75rem;  padding-bottom: 0.75rem; }
.py-4  { padding-top: 1rem;     padding-bottom: 1rem; }
.py-5  { padding-top: 1.25rem;  padding-bottom: 1.25rem; }
.py-6  { padding-top: 1.5rem;   padding-bottom: 1.5rem; }
.py-12 { padding-top: 3rem;     padding-bottom: 3rem; }
.py-20 { padding-top: 5rem;     padding-bottom: 5rem; }
.py-24 { padding-top: 6rem;     padding-bottom: 6rem; }
.pb-0\.5 { padding-bottom: 0.125rem; }
.pb-2  { padding-bottom: 0.5rem; }
.pl-2  { padding-left: 0.5rem; }
.pr-2  { padding-right: 0.5rem; }
.pt-1  { padding-top: 0.25rem; }
.pt-10 { padding-top: 2.5rem; }

/* ── Margin ── */
.mb-1  { margin-bottom: 0.25rem; }
.mb-2  { margin-bottom: 0.5rem; }
.mb-3  { margin-bottom: 0.75rem; }
.mb-4  { margin-bottom: 1rem; }
.mb-6  { margin-bottom: 1.5rem; }
.mb-8  { margin-bottom: 2rem; }
.mb-10 { margin-bottom: 2.5rem; }
.mb-12 { margin-bottom: 3rem; }
.mb-14 { margin-bottom: 3.5rem; }
.mt-0\.5 { margin-top: 0.125rem; }
.mt-1  { margin-top: 0.25rem; }
.mt-2  { margin-top: 0.5rem; }
.mt-3  { margin-top: 0.75rem; }
.mt-4  { margin-top: 1rem; }
.mt-5  { margin-top: 1.25rem; }
.mt-6  { margin-top: 1.5rem; }
.mt-8  { margin-top: 2rem; }
.mt-12 { margin-top: 3rem; }

/* ── Space ── */
.space-y-0\.5 > * + * { margin-top: 0.125rem; }
.space-y-2    > * + * { margin-top: 0.5rem; }
.space-y-3    > * + * { margin-top: 0.75rem; }
.space-y-4    > * + * { margin-top: 1rem; }

/* ============================================================
   Display / Visibility
   ============================================================ */
.block        { display: block; }
.inline-block { display: inline-block; }
.hidden       { display: none; }

/* ── Overflow ── */
.overflow-hidden  { overflow: hidden; }
.overflow-x-auto  { overflow-x: auto; }

/* ── Position ── */
.sticky   { position: sticky; }
.top-0    { top: 0; }
.z-50     { z-index: 50; }

/* ============================================================
   Typography
   ============================================================ */
.text-xs   { font-size: 0.75rem;  line-height: 1rem; }
.text-sm   { font-size: 0.875rem; line-height: 1.25rem; }
.text-base { font-size: 1rem;     line-height: 1.5rem; }
.text-lg   { font-size: 1.125rem; line-height: 1.75rem; }
.text-xl   { font-size: 1.25rem;  line-height: 1.75rem; }
.text-2xl  { font-size: 1.5rem;   line-height: 2rem; }
.text-4xl  { font-size: 2.25rem;  line-height: 2.5rem; }
.text-5xl  { font-size: 3rem;     line-height: 1; }

.font-medium  { font-weight: 500; }
.font-bold    { font-weight: 700; }
.font-semibold{ font-weight: 600; }
.font-black   { font-weight: 900; }
.font-normal  { font-weight: 400; }

.leading-none    { line-height: 1; }
.leading-tight   { line-height: 1.25; }
.leading-relaxed { line-height: 1.625; }

.tracking-wide    { letter-spacing: 0.025em; }
.tracking-widest  { letter-spacing: 0.1em; }

.text-left    { text-align: left; }
.text-center  { text-align: center; }
.text-right   { text-align: right; }

.uppercase        { text-transform: uppercase; }
.whitespace-nowrap{ white-space: nowrap; }
.truncate         { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ── Text Colors ── */
.text-white      { color: #ffffff; }
.text-white\/40  { color: rgba(255,255,255,.40); }
.text-white\/60  { color: rgba(255,255,255,.60); }
.text-white\/70  { color: rgba(255,255,255,.70); }
.text-white\/75  { color: rgba(255,255,255,.75); }
.text-white\/80  { color: rgba(255,255,255,.80); }
.text-slate-300  { color: var(--slate-300); }
.text-slate-400  { color: var(--slate-400); }
.text-slate-500  { color: var(--slate-500); }
.text-slate-600  { color: var(--slate-600); }
.text-slate-700  { color: var(--slate-700); }
.text-slate-800  { color: var(--slate-800); }
.text-blue-700   { color: var(--blue-700); }
.text-blue-900   { color: var(--blue-900); }
.text-orange-300 { color: var(--orange-300); }
.text-orange-400 { color: var(--orange-400); }
.text-orange-600 { color: #ea580c; }
.text-amber-500  { color: var(--amber-500); }
.text-amber-600  { color: var(--amber-600); }
.text-amber-700  { color: var(--amber-700); }
.text-red-600    { color: var(--red-600); }

/* ============================================================
   Backgrounds
   ============================================================ */
.bg-white      { background-color: #ffffff; }
.bg-slate-50   { background-color: var(--slate-50); }
.bg-slate-100  { background-color: var(--slate-100); }
.bg-slate-900  { background-color: var(--slate-900); }
.bg-blue-50    { background-color: var(--blue-50); }
.bg-blue-900   { background-color: var(--blue-900); }
.bg-indigo-50  { background-color: var(--indigo-50); }
.bg-orange-50  { background-color: var(--orange-50); }
.bg-orange-50\/50 { background-color: rgba(255,247,237,.5); }
.bg-orange-500 { background-color: var(--orange-500); }
.bg-amber-500  { background-color: var(--amber-500); }
.bg-red-50     { background-color: var(--red-50); }
.bg-rose-50    { background-color: var(--rose-50); }
.bg-teal-50    { background-color: var(--teal-50); }
.bg-green-50   { background-color: var(--green-50); }
.bg-purple-50  { background-color: var(--purple-50); }
.bg-yellow-50  { background-color: var(--yellow-50); }
.bg-white\/10  { background-color: rgba(255,255,255,.10); }

/* ============================================================
   Borders
   ============================================================ */
.border       { border-width: 1px; border-style: solid; }
.border-2     { border-width: 2px; border-style: solid; }
.border-b     { border-bottom-width: 1px; border-bottom-style: solid; }
.border-t     { border-top-width: 1px; border-top-style: solid; }
.border-collapse { border-collapse: collapse; }
.border-slate-100 { border-color: var(--slate-100); }
.border-slate-200 { border-color: var(--slate-200); }
.border-blue-200  { border-color: #bfdbfe; }
.border-orange-100{ border-color: #ffedd5; }
.border-orange-400{ border-color: var(--orange-400); }

.rounded-full { border-radius: 9999px; }
.rounded-lg   { border-radius: 0.5rem; }
.rounded-xl   { border-radius: 0.75rem; }
.rounded-2xl  { border-radius: 1rem; }

/* ============================================================
   Shadows
   ============================================================ */
.shadow-sm   { box-shadow: 0 1px 2px rgba(0,0,0,.05); }
.shadow-lg   { box-shadow: 0 10px 15px -3px rgba(0,0,0,.1), 0 4px 6px -4px rgba(0,0,0,.1); }
.shadow-2xl  { box-shadow: 0 25px 50px -12px rgba(0,0,0,.25); }
.shadow-blue-900\/25   { box-shadow: 0 10px 15px -3px rgba(30,58,138,.25); }
.shadow-orange-900\/30 { box-shadow: 0 10px 15px -3px rgba(124,45,18,.30); }

/* ============================================================
   Transitions / Hover
   ============================================================ */
.transition-colors { transition-property: color, background-color, border-color; transition-duration: 150ms; transition-timing-function: cubic-bezier(0.4,0,0.2,1); }

.hover\:bg-orange-400:hover { background-color: var(--orange-400); }
.hover\:bg-orange-600:hover { background-color: var(--orange-600); }
.hover\:bg-amber-400:hover  { background-color: var(--amber-400); }
.hover\:bg-blue-800:hover   { background-color: var(--blue-800); }
.hover\:bg-slate-200:hover  { background-color: var(--slate-100); }

/* ============================================================
   Component Styles (既存カスタムクラス)
   ============================================================ */

/* ── Hero ── */
.hero { background: linear-gradient(145deg, #061e54 0%, #0b327f 50%, #1144b7 100%); position: relative; overflow: hidden; }
.hero::before { content:''; position:absolute; inset:0; background: radial-gradient(ellipse 80% 60% at 70% 40%, rgba(80,140,255,.18) 0%, transparent 70%); pointer-events:none; }

/* ── Section labels ── */
.section-label { display:inline-block; font-size:11px; font-weight:700; letter-spacing:.18em; text-transform:uppercase; padding:5px 14px; border-radius:20px; }

/* ── Pain cards ── */
.pain-card { border-left: 3px solid #e05555; background:#fff5f5; border-radius:12px; padding:20px 22px; }

/* ── Feature flow ── */
.flow-step { display:flex; align-items:flex-start; gap:20px; }
.flow-num { width:40px; height:40px; background:linear-gradient(135deg,#082a74,#1144b7); color:#fff; border-radius:50%; display:flex; align-items:center; justify-content:center; font-weight:900; font-size:16px; flex-shrink:0; }
.flow-arrow { text-align:center; color:#cbd5e1; font-size:22px; margin:4px 0 4px 20px; line-height:1; }

/* ── Feature cards ── */
.feat-card { background:#fff; border-radius:16px; padding:28px 24px; box-shadow:0 2px 16px rgba(10,40,100,.07); border:1px solid #e2e8f0; transition:transform .2s, box-shadow .2s; }
.feat-card:hover { transform:translateY(-3px); box-shadow:0 8px 28px rgba(10,40,100,.12); }
.feat-icon { width:52px; height:52px; border-radius:14px; display:flex; align-items:center; justify-content:center; font-size:26px; margin-bottom:16px; }

/* ── Pricing ── */
.plan-card { border-radius:20px; padding:36px 28px; border: 2px solid #e2e8f0; background:#fff; position:relative; transition: transform .2s, box-shadow .2s; }
.plan-card:hover { transform:translateY(-4px); }
.plan-card.featured { border-color: #1144b7; box-shadow:0 12px 40px rgba(17,68,183,.15); }
.plan-badge { position:absolute; top:-14px; left:50%; transform:translateX(-50%); background:linear-gradient(90deg,#082a74,#1144b7); color:#fff; font-size:12px; font-weight:700; padding:4px 18px; border-radius:20px; white-space:nowrap; }
.plan-check { color:#1144b7; font-size:14px; }
.plan-cross { color:#cbd5e1; font-size:14px; }

/* ── Comparison table ── */
.comp-tbl th { background: #082a74; color:#fff; font-size:13px; font-weight:700; padding:12px 8px; }
.comp-tbl td { font-size:13px; padding:10px 8px; border-bottom:1px solid #e8edf4; text-align:center; }
.comp-tbl td:first-child { text-align:left; font-weight:500; color:#334155; padding-left:16px; }
.comp-tbl tr:nth-child(even) td { background:#f8fafc; }

/* ── FAQ ── */
details summary { cursor:pointer; list-style:none; display:flex; justify-content:space-between; align-items:flex-start; gap:12px; }
details summary::-webkit-details-marker { display:none; }
details summary .arrow { transition:transform .25s; flex-shrink:0; font-size:18px; color:#1144b7; margin-top:2px; }
details[open] summary .arrow { transform:rotate(45deg); }
details[open] summary { font-weight:700; color:#082a74; }

/* ── Animations ── */
@keyframes fadeUp { from{ opacity:0; transform:translateY(24px); } to{ opacity:1; transform:translateY(0); } }
.fade-up { animation: fadeUp .6s ease both; }
.delay-1 { animation-delay:.1s; }
.delay-2 { animation-delay:.2s; }
.delay-3 { animation-delay:.3s; }
.delay-4 { animation-delay:.4s; }

/* ── Sync badge ── */
.sync-dot { width:8px; height:8px; background:#22c55e; border-radius:50%; display:inline-block; margin-right:5px; animation:pulse 1.6s ease-in-out infinite; }
@keyframes pulse { 0%,100%{opacity:1;} 50%{opacity:.35;} }

/* ── Mock screens ── */
.mock-sidebar { background:linear-gradient(180deg,#0f2340,#1a3a5c); border-radius:10px 0 0 10px; padding:16px 0; min-width:120px; }
.mock-sb-item { padding:9px 16px; font-size:12px; color:rgba(255,255,255,.65); display:flex; align-items:center; gap:8px; }
.mock-sb-item.on { background:rgba(255,255,255,.12); color:#fff; border-left:3px solid #c8922a; }
.mock-main { flex:1; background:#eef1f6; border-radius:0 10px 10px 0; padding:14px; overflow:hidden; }

/* ── Hero mock cards responsive ── */
.mock-card-table th, .mock-card-table td { font-size:10px; padding:4px 3px; }

/* ============================================================
   Responsive
   ============================================================ */
@media (min-width: 400px) {
  .mock-card-table th, .mock-card-table td { font-size:11px; padding:5px 4px; }
}

@media (min-width: 640px) {
  /* sm */
  .mock-card-table th, .mock-card-table td { font-size:12px; padding:6px 5px; }
  .sm\:block { display: block; }
}

@media (min-width: 768px) {
  /* md */
  .md\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .md\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 1024px) {
  /* lg */
  .lg\:py-28       { padding-top: 7rem; padding-bottom: 7rem; }
  .lg\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lg\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .lg\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .lg\:inline      { display: inline; }
}