/* ===== wedm.html: style block 1 ===== */
/* ===== Base ===== */
    :root{
      --txt:#e9eef6; --muted:#a9b3c3;
      --shadow: 0 10px 30px rgba(0,0,0,.35);
      --radius-lg: 20px;
      --navH: 72px; --navH-small: 56px;
      --navAlpha: .22; --navAlphaSolid: .86;

      --border: rgba(255,255,255,.18);
      --panel: rgba(255,255,255,.06);
      --panel-strong: rgba(255,255,255,.08);
      --panel-hover: rgba(255,255,255,.10);

      --space-1: 6px; --space-2: 10px; --space-3: 14px; --space-4: 20px;
    }
    html[data-theme="corporate"]{
      --bg1:#0b1020; --bg2:#0f1b36; --acc1:#3ad7bd; --acc2:#6aa4ff;
      --navBg: rgba(0,0,0,var(--navAlpha));
      --navBgSolid: rgba(6,10,20,var(--navAlphaSolid));
    }

    *{ box-sizing:border-box }
    html,body{ height:100% }
    body{
      margin:0;
      color:var(--txt);
      background:linear-gradient(180deg,var(--bg1),var(--bg2));
      font-size:16px;
      line-height:1.7;
      letter-spacing:.02em;
      overflow-x:hidden;
    }
    a,a:visited{ color:#fff; text-decoration:none }
    a:hover{ opacity:.92 }

    img,svg,video,canvas{ max-width:100%; height:auto }

    h1,h2,h3{ line-height:1.25; margin: var(--space-4) 0 var(--space-2); }
    h1{ font-size:clamp(22px,4vw,34px); letter-spacing:.01em }
    h2{ font-size:clamp(18px,3vw,24px) }
    h3{ font-size:clamp(16px,2.6vw,20px) }

    /* ===== Global Nav (existing feel, simplified) ===== */
    .g-nav{
      position:fixed; inset-inline:0; top:0; z-index:100;
      height:var(--navH);
      display:flex; align-items:center; justify-content:center;
      background:var(--navBg);
      border-bottom:1px solid rgba(255,255,255,.18);
      backdrop-filter:saturate(115%) blur(6px);
      transition: height .28s ease, background-color .28s ease;
    }
    .g-nav.shrink{ height:var(--navH-small); background:var(--navBgSolid); }
    .g-wrap{
      width:100%;
      max-width:min(1380px,100vw);
      display:flex; align-items:center; justify-content:space-between;
      gap:20px; padding:0 10px;
      flex-wrap:nowrap;
    }
    .brand{ display:flex; align-items:center; gap:10px; white-space:nowrap; min-width:0 }
    .brand img{ height:28px; width:auto }
    .brand .name{
      font-weight:800;
      font-size:clamp(12px,1.9vw,16px);
      max-width:60vw;
      overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
    }

    .nav-right{ display:flex; align-items:center; gap:18px; flex-wrap:nowrap; min-width:0 }
    .nav-links{ display:flex; align-items:center; gap: clamp(18px, 3.2vw, 32px); flex-wrap:nowrap; }
    .nav-links > a, .nav-links > .dd > a{
      font-weight:800; font-size:13px;
      padding:6px 8px; border-radius:10px;
      border:1px solid transparent;
    }
    .nav-links > a:hover, .nav-links > .dd:hover > a{
      border-color:rgba(255,255,255,.2);
      background:rgba(255,255,255,.06);
    }
    .dd{ position:relative }
    .dd-menu{
      position:absolute; top: calc(100% + 8px); left:0; min-width:240px;
      background:var(--navBgSolid);
      border:1px solid rgba(255,255,255,.14);
      border-radius:12px; padding:8px;
      display:none; box-shadow:var(--shadow);
    }
    .dd.open .dd-menu{ display:block }
    .dd-menu a{
      display:block; padding:10px 12px;
      border-radius:10px; font-weight:800;
    }
    .dd-menu a:hover{ background:rgba(255,255,255,.06) }

    .lang-switch{ display:flex; gap:8px }
    .lang-switch a{
      border:1px solid rgba(255,255,255,.2);
      padding:6px 10px; border-radius:8px; font-weight:800;
    }
    .nav-cta{
      display:inline-flex; align-items:center; gap:.6em;
      padding:10px 12px; border-radius:12px;
      background:linear-gradient(135deg,var(--acc1),var(--acc2));
      color:#071018; font-weight:800; box-shadow:var(--shadow);
    }
    .tel-cta{ display:none }
    .sp-toggle{ display:none }

    /* Mobile nav */
    @media (max-width: 960px){
      .nav-links, .lang-switch, .nav-cta{ display:none }
      .tel-cta{ display:inline-flex }
      .sp-toggle{ display:inline-flex }
      .sp-toggle button{
        background:transparent;
        border:1px solid rgba(255,255,255,.25);
        color:#fff;
        padding:8px 10px;
        border-radius:10px;
        font-weight:800;
        white-space:nowrap;
      }
    }

    /* Drawer */
    .drawer{ display:none }
    @media (max-width: 960px){
      .drawer{
        position:fixed; inset:0;
        background:rgba(0,0,0,.45);
        z-index:90;
        display:none;
      }
      .drawer.show{ display:block }
      .drawer-panel{
        position:fixed;
        top: calc(var(--navH-small) + 8px);
        right:0;
        height: calc(100% - (var(--navH-small) + 8px));
        width:min(86vw, 320px);
        background:var(--navBgSolid);
        border-left:1px solid rgba(255,255,255,.16);
        padding:16px;
        overflow:auto;
        box-shadow:-20px 0 40px rgba(0,0,0,.35);
        transform: translateX(100%);
        transition: transform .28s ease;
        padding-bottom:max(16px,env(safe-area-inset-bottom));
        -webkit-overflow-scrolling:touch;
      }
      .drawer.show .drawer-panel{ transform: translateX(0); }
      .drawer .close{
        position:sticky; top:0;
        padding:6px 0 8px;
        margin-bottom:8px;
        background:linear-gradient(180deg, rgba(6,10,20,.95), rgba(6,10,20,.75));
        z-index:1;
        text-align:right;
      }
      .drawer .close button{
        border: 1px solid rgba(255,255,255,.25);
        background: transparent;
        color: #fff;
        padding: 8px 10px;
        border-radius: 8px;
      }
      .drawer a{ display:block; padding:14px 12px; border-bottom:1px solid rgba(255,255,255,.12) }
      .drawer .group-title{ margin:6px 4px 0; color:#cfe1ff; font-weight:800; font-size:13px }
    }

    /* ===== Hero ===== */
    html{ scroll-padding-top: var(--navH) }
    @media (max-width:960px){ html{ scroll-padding-top: var(--navH-small) } }

    .hero{
      position:relative;
      overflow:hidden;
      padding-top: calc(var(--navH) + 28px);
      min-height: 34svh;
      display:grid; place-items:center;
      background:
        linear-gradient(180deg, rgba(15,27,54,.78), rgba(15,27,54,.25)),
        url('https://www.nikko-kikai.co.jp/img/mecha_a.png') center/cover no-repeat;
      border-bottom:1px solid rgba(255,255,255,.12);
    }
    @media (max-width:960px){ .hero{ padding-top: calc(var(--navH-small) + 20px) } }
    .hero::before{
      content:"";
      position:absolute; inset:0;
      background: repeating-linear-gradient(
        to bottom,
        rgba(255,255,255,0.06) 0px,
        rgba(255,255,255,0.06) 1px,
        transparent 2px,
        transparent 4px
      );
      mix-blend-mode: overlay;
      opacity:.18;
      pointer-events:none;
    }
    .hero::after{
      content:"";
      position:absolute; inset:0;
      background: radial-gradient(120% 80% at 50% -10%, rgba(0,0,0,0) 0%, rgba(0,0,0,.35) 60%, rgba(0,0,0,.55) 100%);
      pointer-events:none;
    }
    .hero-inner{ position:relative; text-align:center; padding: 0 12px; }
    .hero .title{ margin:0; font-weight:900; text-shadow: 0 1px 12px rgba(0,0,0,.45); }
    .hero .lead{ margin:.5em 0 0; color:#cdd8e6; }

    /* ===== Layout ===== */
    .section{
      max-width:min(1100px, 92vw);
      margin: clamp(22px, 5vw, 54px) auto;
    }

    .panel{
      background:var(--panel);
      border:1px solid var(--border);
      border-radius:16px;
      box-shadow:var(--shadow);
    }

    /* ===== Toolbar (sticky) ===== */
    .toolbar{
      position: sticky;
      top: calc(var(--navH-small) + 10px);
      z-index: 80;
      padding: 10px 0;
      background: linear-gradient(180deg, rgba(15,27,54,.82), rgba(15,27,54,.35));
      backdrop-filter: saturate(120%) blur(8px);
      border-bottom:1px solid rgba(255,255,255,.10);
    }
    @media (min-width:961px){
      .toolbar{ top: calc(var(--navH) + 10px); }
    }
    .toolbar-inner{
      max-width:min(1100px, 92vw);
      margin:0 auto;
      display:flex;
      flex-wrap:wrap;
      gap:10px;
      align-items:center;
      padding: 10px 12px;
      border-radius: 14px;
      border: 1px solid rgba(255,255,255,.12);
      background: rgba(6,10,20,.18);
    }

    .chips{ display:flex; flex-wrap:wrap; gap:8px; }
    .chip{
      appearance:none;
      border:1px solid rgba(255,255,255,.25);
      background: rgba(255,255,255,.04);
      color:#fff;
      padding: 8px 12px;
      border-radius: 999px;
      font-weight: 900;
      cursor:pointer;
      white-space:nowrap;
    }
    .chip.active{
      background: linear-gradient(135deg,var(--acc1),var(--acc2));
      color:#071018;
      border-color: transparent;
    }

    .search{
      flex: 1 1 280px;
      min-width: 220px;
    }
    .search input{
      width:100%;
      padding:10px 12px;
      border-radius: 12px;
      border:1px solid rgba(255,255,255,.22);
      background: rgba(255,255,255,.06);
      color:#fff;
      outline:none;
    }
    .search input::placeholder{ color: rgba(233,238,246,.70); }

    .hint{
      width:100%;
      color: var(--muted);
      font-weight:800;
      font-size: 13px;
      margin-top: 2px;
    }

    /* ===== Maker sections ===== */
    .maker{
      margin-top: 22px;
    }
    .maker-head{
      display:flex; flex-wrap:wrap;
      align-items:baseline;
      justify-content:space-between;
      gap:10px;
      padding: 14px 16px;
    }
    .maker-title{
      margin:0;
      font-weight: 900;
      display:flex;
      gap:10px;
      align-items:center;
    }
    .maker-title small{
      color: var(--muted);
      font-weight: 900;
      font-size: 14px;
    }
    .maker-meta{
      color: var(--muted);
      font-weight: 800;
      font-size: 13px;
    }

    /* ===== Tables ===== */
    .table-wrap{
      position:relative;
      overflow-x:auto;
      -webkit-overflow-scrolling:touch;
      max-width: 100%;
      border-top: 1px solid rgba(255,255,255,.10);
      border-radius: 0 0 16px 16px;
      padding: 10px;
      background: rgba(6,10,20,.16);
    }
    .table-wrap::after{
      content:"";
      position:absolute; right:0; top:0; bottom:0; width:36px;
      background: linear-gradient(90deg, rgba(0,0,0,0), rgba(0,0,0,.55));
      pointer-events:none;
      opacity:.75;
    }
    table{
      width: max(760px, 100%);
      border-collapse: separate;
      border-spacing: 0;
      background: rgba(6,10,20,.35);
      border-radius: 12px;
      overflow:hidden;
      margin: 0;
    }
    th, td{
      border:1px solid var(--border);
      padding: 10px 12px;
      vertical-align: middle;
      text-align: left;
      white-space: normal;
      word-break: break-word;
      overflow-wrap: anywhere;
    }
    thead th{
      position: sticky;
      top: 0;
      background: rgba(6,10,20,.60);
      backdrop-filter:saturate(120%) blur(2px);
      z-index: 2;
      font-weight: 900;
    }
    tbody tr:nth-child(odd) td{ background: rgba(255,255,255,.03); }
    tbody tr:hover td{ background: rgba(255,255,255,.06); }

    /* Category row emphasis (the ones that use <span style="color:..."> etc.) */
    .cat-row th{
      background: rgba(255,255,255,.04);
      font-weight: 900;
    }
    .cat-row td{ background: rgba(255,255,255,.02); }
    .dim{ opacity:.22; }
    .hidden{ display:none !important; }

    .note{
      margin-top: 18px;
      padding: 14px 16px;
      border-radius: 16px;
      border: 1px solid rgba(255,255,255,.12);
      background: rgba(255,255,255,.05);
      color: #cfe1ff;
      font-weight: 800;
    }

    footer{ color:#9fb0c0; text-align:center; padding:40px 12px 60px }
    @media (prefers-reduced-motion: reduce){
      *{ animation:none !important; transition:none !important; scroll-behavior:auto !important; }
    }