/* ==========================================================================
   IZU – High-design UI kit for the middle area
   - Fluid typography / generous whitespace / subtle motion
   - Cards, grids, timeline, team, offices, CTA, forms, tables
   - Light/Dark scheme, glassmorphism, hover depth
   ========================================================================== */

/* ========== 0) Theme tokens ========== */
:root {
    --bg: #fafafa;
    --surface: #ffffff;
    --surface-2: #f6f7f9;
    --text: #15171a;
    --muted: #5a6070;
    --muted-2: #8a90a0;
    --accent: #e74a3b;           /* 既存ブランド赤に合わせる */
    --accent-2: #ff9a8f;
    --border: #e7e8ec;
    --ring: rgba(231, 74, 59, .35);
    --shadow: rgba(10,10,10,.08);
    --shadow-2: rgba(10,10,10,.12);
    --grad-1: linear-gradient(135deg, #fff 0%, #f7f8fb 100%);
    --grad-2: linear-gradient(135deg, #ffe7e4 0%, #fff7f6 100%);
    --radius: 16px;
    --radius-lg: 22px;
  
    /* fluid type scale */
    --fs-12: clamp(11px, .85vw, 12px);
    --fs-13: clamp(12px, .9vw, 13px);
    --fs-14: clamp(13px, .95vw, 14px);
    --fs-16: clamp(14px, 1.05vw, 16px);
    --fs-18: clamp(16px, 1.2vw, 18px);
    --fs-20: clamp(18px, 1.35vw, 20px);
    --fs-24: clamp(20px, 1.8vw, 24px);
    --fs-28: clamp(22px, 2.2vw, 28px);
    --fs-32: clamp(24px, 2.6vw, 32px);
    --fs-40: clamp(28px, 3.2vw, 40px);
    --fs-48: clamp(32px, 3.6vw, 48px);
  
    /* spacing */
    --space-8: 8px;
    --space-12: 12px;
    --space-16: 16px;
    --space-20: 20px;
    --space-24: 24px;
    --space-28: 28px;
    --space-32: 32px;
    --space-40: 40px;
    --space-48: 48px;
    --space-64: clamp(40px, 7vw, 64px);
    --space-80: clamp(48px, 9vw, 80px);
  }
  
  /* Dark scheme */
  @media (prefers-color-scheme: dark) {
    :root {
      --bg: #0f1114;
      --surface: #14171b;
      --surface-2: #181c21;
      --text: #eef2f6;
      --muted: #b9c0ca;
      --muted-2: #8f97a3;
      --border: #262b33;
      --shadow: rgba(0,0,0,.35);
      --shadow-2: rgba(0,0,0,.45);
      --grad-1: linear-gradient(135deg, #15181d 0%, #0f1114 100%);
      --grad-2: linear-gradient(135deg, #2a1615 0%, #151114 100%);
      --ring: rgba(255, 120, 110, .35);
    }
  }
  
  /* ========== 1) Base ========== */
  html, body { background: var(--bg); color: var(--text); }
  .section { padding: var(--space-64) 0; }
  .container { width: min(1100px, 92%); margin: 0 auto; }
  a { color: var(--accent); text-decoration: none; }
  a:hover { text-decoration: underline; text-underline-offset: 2px; }
  
  /* Typography */
  .display { font-size: var(--fs-40); line-height: 1.15; font-weight: 800; letter-spacing: .2px; }
  .title { font-size: var(--fs-28); font-weight: 800; letter-spacing: .2px; }
  .lead { font-size: var(--fs-18); color: var(--muted); }
  p, li { font-size: var(--fs-16); color: var(--text); }
  .muted { color:white; }
  .small { font-size: var(--fs-13); }
  
  /* Accent underline */
  .title-accent {
    position: relative; display:inline-block; height: 6px; width: 56px; 
    background: var(--accent); border-radius: 999px; margin-left: 10px; vertical-align: middle;
  }
  
  /* ========== 2) Layout primitives ========== */
  .grid { display: grid; gap: clamp(14px, 2vw, 22px); }
  .grid-2 { grid-template-columns: 1fr; }
  .grid-3 { grid-template-columns: 1fr; }
  @media (min-width: 860px){ .grid-2 { grid-template-columns: repeat(2, 1fr); } }
  @media (min-width: 960px){ .grid-3 { grid-template-columns: repeat(3, 1fr); } }
  
  .split { display:grid; grid-template-columns: 1fr; }
  @media (min-width: 900px){ .split { grid-template-columns: 1.2fr 1fr; } }
  .split-media { position: relative; min-height: 280px; border-radius: var(--radius-lg); overflow: hidden; }
  .split-media > img { width: 100%; height: 100%; object-fit: cover; display:block; }
  
  /* Cards / surfaces */
  .card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: 0 18px 40px var(--shadow);
    overflow: hidden;
    backdrop-filter: saturate(140%) blur(0px);
  }
  .card-pad { padding: clamp(18px, 3vw, 32px); }
  .card-elev { box-shadow: 0 24px 60px var(--shadow-2); }
  
  /* Glass */
  .glass {
    background: color-mix(in srgb, var(--surface) 75%, transparent);
    backdrop-filter: saturate(160%) blur(10px);
  }
  
  /* Hover depth */
  .hover-card { transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease; }
  .hover-card:hover { transform: translateY(-6px); box-shadow: 0 28px 70px var(--shadow-2); border-color: color-mix(in srgb, var(--border) 70%, var(--accent) 30%); }
  
  /* ========== 3) Components ========== */
  
  /* Pill */
  .pill {
    display:inline-block; padding: 6px 12px; border-radius: 9999px;
    background: var(--surface-2); border: 1px solid var(--border);
    color: var(--accent); font-weight: 800; font-size: var(--fs-12);
  }
  
  /* Checklist */
  .checks { list-style: none; padding: 0; margin: var(--space-12) 0 var(--space-20); }
  .checks li { position: relative; padding-left: 28px; color: var(--muted); margin: 10px 0; }
  .checks li::before { content: "✓"; position: absolute; left: 0; top: 0; color: var(--accent); font-weight: 900; }
  
  /* Buttons */
  .btn {
    display:inline-flex; align-items:center; justify-content:center; gap: 8px;
    padding: 12px 18px; border-radius: 12px; border: 1px solid transparent;
    background: var(--accent); color: #fff; font-weight: 800; letter-spacing: .2px;
    box-shadow: 0 10px 26px rgba(231,74,59,.25);
    transition: transform .2s ease, filter .2s ease, box-shadow .2s ease;
  }
  .btn:hover { transform: translateY(-1px); filter: brightness(1.05); box-shadow: 0 16px 34px rgba(231,74,59,.28); text-decoration: none; }
  .btn.ghost {
    background: transparent; color: var(--accent); border-color: var(--accent);
    box-shadow: none;
  }
  .btn.ghost:hover { background: var(--grad-2); }
  
  /* KPI statbar */
  .statbar { 
    display:grid; gap: 14px; grid-template-columns: 1fr; 
    padding: 18px 20px; align-items: center; 
    background: var(--grad-1); border: 1px solid var(--border); border-radius: var(--radius);
  }
  @media (min-width: 800px){ .statbar { grid-template-columns: repeat(7, minmax(0,1fr)); } }
  .stat { display:grid; gap: 4px; text-align: center; }
  .stat-num { font-size: var(--fs-32); font-weight: 900; letter-spacing: .2px; }
  .stat-unit { font-size: .6em; font-weight: 800; color: var(--accent); margin-left: 2px; }
  .stat-label { font-size: var(--fs-12); color: var(--muted-2); }
  .divider { display: none; height: 28px; width: 1px; background: var(--border); margin: 0 auto; }
  @media (min-width: 800px){ .divider { display: block; } }
  
  /* Info (dl tidy) */
  .info-cards dt { color: var(--muted-2); font-size: var(--fs-13); }
  .info-cards dd { margin: 2px 0 14px; }
  
  /* Timeline – modern */
  .timeline { border-left: none; background: var(--surface); }
  .timeline.modern .tl-row {
    display:grid; grid-template-columns: 24px 90px 1fr; gap: 12px; align-items:start; position: relative;
  }
  .timeline.modern .tl-dot { width: 10px; height:10px; border-radius: 999px; background: var(--accent); margin-top: 8px; box-shadow: 0 0 0 6px color-mix(in srgb, var(--accent) 10%, transparent); }
  .timeline.modern .tl-year { font-weight: 900; color: var(--text); letter-spacing: .2px; }
  .timeline.modern .tl-desc { color: var(--muted); }
  .timeline.modern .tl-row + .tl-row { margin-top: 14px; }
  @media (min-width: 860px){ .timeline.modern .tl-row + .tl-row { margin-top: 18px; } }
  
  /* Team */
  .team-grid .team-card .media-64 { aspect-ratio: 16/10; background: var(--surface-2); }
  .team-grid .team-card .media-64 img { width:100%; height:100%; object-fit: cover; display:block; }
  .role { color: var(--muted-2); font-size: var(--fs-14); margin: 2px 0 8px; }
  
  /* Offices */
  .office-card .media { aspect-ratio: 16/10; background: var(--surface-2); }
  .office-card .media img { width:100%; height:100%; object-fit: cover; display:block; }
  .office-meta { color: var(--muted); font-size: var(--fs-14); }
  
  /* CTA */
  .cta {
    display:grid; grid-template-columns: 1fr; gap: 14px; padding: 22px;
    align-items:center; justify-content: space-between;
    border-radius: var(--radius-lg);
    background: var(--grad-2);
    border: 1px solid color-mix(in srgb, var(--border) 75%, var(--accent) 25%);
  }
  .cta-title { font-size: var(--fs-24); margin: 0; }
  @media (min-width: 860px){ .cta { grid-template-columns: 1fr auto; padding: 28px 32px; } }
  
  /* ========== 4) Hero/section helpers ========== */
  .section.hero {
    padding: var(--space-80) 0 var(--space-64);
    background: var(--grad-1);
    border-bottom: 1px solid var(--border);
  }
  .section.hero .headline { font-size: var(--fs-48); font-weight: 900; line-height: 1.05; }
  .section.hero .sub { font-size: var(--fs-18); color: var(--muted); max-width: 720px; }
  
  /* Breadcrumb (必要なら) */
  .breadcrumb { display:flex; gap: 8px; align-items:center; font-size: var(--fs-13); color: var(--muted-2); }
  .breadcrumb a { color: inherit; text-decoration: none; }
  .breadcrumb .sep { opacity: .35; }
  
  /* ========== 5) Forms / Tables (もし使っていたら質感UP) ========== */
  .input, select, textarea {
    width: 100%; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--border);
    background: var(--surface); color: var(--text); outline: none; transition: box-shadow .2s ease, border-color .2s ease;
  }
  .input:focus, select:focus, textarea:focus {
    border-color: var(--accent); box-shadow: 0 0 0 6px var(--ring);
  }
  .table {
    width: 100%; border-collapse: collapse; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
    overflow: hidden;
  }
  .table th, .table td { padding: 14px 16px; border-bottom: 1px solid var(--border); text-align: left; }
  .table thead th { background: var(--surface-2); font-weight: 800; }
  .table tr:hover td { background: color-mix(in srgb, var(--surface-2) 60%, transparent); }
  
  /* ========== 6) Motions ========== */
  @media (prefers-reduced-motion: no-preference) {
    .fade-in { opacity: 0; transform: translateY(10px); transition: .6s cubic-bezier(.22,.67,.21,.99); }
    .fade-in.is-inview { opacity: 1; transform: none; }
    .cards-zoom > * { transition: transform .35s ease, box-shadow .35s ease; }
    .cards-zoom > *:hover { transform: translateY(-4px); box-shadow: 0 18px 44px var(--shadow-2); }
  }
  
  /* ========== 7) Utilities ========== */
  .max-w-720 { max-width: 720px; }
  .center { display: grid; place-items: center; }
  .stack-sm > * + * { margin-top: 10px; }
  .stack-md > * + * { margin-top: 16px; }
  .stack-lg > * + * { margin-top: 22px; }
  .mt-12 { margin-top: 12px; }
  .mt-16 { margin-top: 16px; }
  .mt-20 { margin-top: 20px; }
  .mt-24 { margin-top: 24px; }
  .mt-32 { margin-top: 32px; }
  .mx-auto { margin-inline: auto; }
  .badge {
    display:inline-block; padding: 4px 8px; border: 1px solid var(--border);
    border-radius: 999px; background: var(--surface-2); color: var(--muted);
  }
  
  /* ========== 8) Optional: subtle image shimmer (空画像の時の質感) ========== */
  .shimmer { position: relative; overflow: hidden; background: var(--surface-2); }
  .shimmer::after {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(110deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.6) 40%, rgba(255,255,255,0) 80%);
    transform: translateX(-100%); animation: shimmer 2s infinite;
  }
  @keyframes shimmer { 100% { transform: translateX(100%); } }
  
  /* ========== 9) Safety overrides (競合が強い場合の保険) ========== */
  body .card, body .btn, body .title, body .display, body .grid, body .statbar, body .timeline, body .cta {
    /* 競合が強すぎる場合は下行の !important をピンポイントで解禁してね */
    /* border-color: var(--border) !important; */
  }