:root{
      --bg:#f8fafc;
      --panel:#ffffff;
      --line:#e2e8f0;
      --text:#0f172a;
      --muted:#64748b;
      --shadow:0 12px 32px rgba(15,23,42,.08);
      --amber-bg:#fffbeb; --amber-line:#fde68a; --amber-text:#92400e;
      --emerald-bg:#ecfdf5; --emerald-line:#a7f3d0; --emerald-text:#065f46;
      --rose-bg:#fff1f2; --rose-line:#fecdd3; --rose-text:#9f1239;
      --sky-bg:#f0f9ff; --sky-line:#bae6fd; --sky-text:#0c4a6e;
      --orange-bg:#fff7ed; --orange-line:#fed7aa; --orange-text:#9a3412;
      --radius:24px;
    }
    *{box-sizing:border-box}
    body{
      margin:0;
      font-family:-apple-system,BlinkMacSystemFont,"Hiragino Sans","Yu Gothic","Noto Sans JP","Segoe UI",sans-serif;
      background:var(--bg);
      color:var(--text);
      line-height:1.6;
    }
    a{color:inherit;text-decoration:none}
    .container{max-width:1320px;margin:0 auto;padding:0 20px}
    .topbar{
      position:sticky; top:0; z-index:50;
      background:rgba(255,255,255,.88);
      backdrop-filter:blur(12px);
      border-bottom:1px solid var(--line);
    }
  .topbar-inner{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  padding:16px 0;
  gap:20px;
}

.topbar-inner > div:first-child{
  flex:1;
  min-width:0;
}

    .eyebrow{font-size:12px;letter-spacing:.08em;text-transform:none;color:var(--muted);margin-bottom:4px}
    .site-title{
  font-size:20px;
  font-weight:700;
  line-height:1.25;
}
.site-subtitle{
  display:block;
  margin-top:4px;
  font-size:12px;
  font-weight:600;
  color:var(--muted);
  line-height:1.3;
}
    .nav{display:flex;gap:12px;align-items:center;color:var(--muted);font-size:14px}
    .nav-link,.nav-cta{
      display:inline-flex;align-items:center;justify-content:center;
      min-height:42px;padding:10px 18px;border-radius:999px;
      font-weight:700;transition:transform .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease;
    }
    .nav-link{
      background:#fff;color:var(--text);border:1px solid var(--line);box-shadow:var(--shadow);
    }
    .nav-link:hover{color:var(--text);transform:translateY(-1px);box-shadow:0 14px 28px rgba(15,23,42,.12)}
    .nav-cta{
      display:inline-flex;align-items:center;justify-content:center;
      padding:10px 18px;border-radius:999px;
      background:#92400e;color:#fff;border:1px solid #92400e;
      font-weight:700;box-shadow:0 10px 24px rgba(146,64,14,.18);
    }
    .nav-cta:hover{color:#fff;transform:translateY(-1px);box-shadow:0 14px 28px rgba(146,64,14,.24)}
    .hero, .about{
      background:var(--panel); border:1px solid var(--line); border-radius:32px; box-shadow:var(--shadow);
    }
    .hero{margin:16px 0 12px;padding:18px 20px}
    .hero-grid{display:grid;grid-template-columns:1.45fr .75fr;gap:16px;align-items:center}
    .hero h1{font-size:clamp(17px,2.2vw,26px);line-height:1.18;margin:0 0 6px;}
    .hero p{margin:0;color:var(--muted);font-size:13px;max-width:920px;line-height:1.5}
    .mini-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
    .mini-box{background:#f8fafc;border-radius:16px;padding:10px 10px;text-align:center;border:1px solid var(--line)}
    .mini-box strong{display:block;font-size:15px}
    .mini-box span{font-size:10px;color:var(--muted)}
    .entry-grid,.concept-grid,.layout-grid{display:grid;gap:16px}
    .entry-grid,.concept-grid{grid-template-columns:repeat(3,minmax(0,1fr));margin:10px 0 14px}
    .card{background:var(--panel);border:1px solid var(--line);border-radius:22px;box-shadow:var(--shadow);padding:16px;transition:transform .18s ease, box-shadow .18s ease}
    .card:hover{transform:translateY(-2px); box-shadow:0 18px 38px rgba(15,23,42,.1)}
    .tag{display:inline-flex;padding:4px 10px;border-radius:999px;font-size:11px;font-weight:700;margin-bottom:10px}
    .tag.amber{background:#fef3c7;color:#92400e}
    .tag.emerald{background:#d1fae5;color:#065f46}
    .tag.rose{background:#ffe4e6;color:#9f1239}
    .tag.sky{background:#e0f2fe;color:#0c4a6e}
    .tag.orange{background:#ffedd5;color:#9a3412}
    .card h3{font-size:18px;margin:0 0 6px}
    .card p{margin:0;color:var(--muted);font-size:13px;line-height:1.4}
    .card .cta{margin-top:10px;font-weight:700;font-size:14px}
    .layout-grid{grid-template-columns:380px minmax(0,1fr); align-items:start; gap:40px}
    .showcase-frame{
      height:860px;
      border:1px solid var(--line);
      border-radius:32px;
      background:linear-gradient(180deg,#ffffff 0%, #f8fafc 100%);
      box-shadow:var(--shadow);
      padding:24px;
      display:flex;
      align-items:stretch;
      justify-content:center;
      overflow:hidden;
    }
    .showcase-frame.phone-frame{padding:24px 18px}
    .showcase-frame.desktop-frame{padding:24px 22px}

    .section-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}
    .section-head .label{font-size:12px; letter-spacing:.18em; text-transform:uppercase; color:var(--muted)}
    .section-head h2{margin:4px 0 0; font-size:32px}

    .works-head{
      align-items:center;
      gap:16px;
      flex-wrap:wrap;
      margin-bottom:12px;
    }
    .works-head h2{
      margin:0;
      font-size:32px;
      line-height:1.1;
      white-space:nowrap;
    }

    .layout-col{
      display:flex;
      flex-direction:column;
    }
    .layout-col .section-head{
      min-height:72px;
      margin-bottom:16px;
      align-items:flex-end;
    }
    .layout-col .phone-browse{
      width:100%;
      max-width:360px;
      margin:0 auto;
      height:100%;
      display:flex;
      flex-direction:column;
    }
    .layout-col .desktop-browse-shell{
      width:100%;
      max-width:740px;
      margin:0 auto;
      height:100%;
      display:flex;
      flex-direction:column;
    }
    .pill{
      border:1px solid var(--line); background:var(--panel); border-radius:999px;
      padding:8px 14px; font-size:12px; color:var(--muted); box-shadow:var(--shadow);
    }
    .phone-shell{
      max-width:360px; margin:0 auto; background:#0f172a; border:10px solid #0f172a;
      border-radius:42px; padding:8px; box-shadow:0 24px 50px rgba(15,23,42,.18);
    }
    .phone-notch{width:144px;height:24px;border-radius:999px;background:#1e293b;margin:0 auto 8px}
    .phone-screen{background:#f8fafc;border-radius:34px;overflow:hidden}
    .phone-header{padding:16px;border-bottom:1px solid var(--line);background:var(--panel);font-size:14px;color:var(--muted)}
    .stack{padding:16px;display:grid;gap:16px}
    .panel{border-radius:28px;padding:18px;border:1px solid;display:flex;flex-direction:column}
    .panel h4{margin:0 0 8px;font-size:19px}
    .panel .inner{
      background:var(--panel); border-radius:20px; padding:28px 18px; text-align:center; border:1px solid rgba(255,255,255,.7);
      box-shadow:0 4px 14px rgba(15,23,42,.06);
      font-size:32px; font-weight:700;
      display:flex; align-items:center; justify-content:center;
      width:100%;
    }
    .amber-panel{background:var(--amber-bg);border-color:var(--amber-line)}
    .amber-panel h4{color:var(--amber-text)}
    .emerald-panel{background:var(--emerald-bg);border-color:var(--emerald-line)}
    .emerald-panel h4{color:var(--emerald-text)}
    .rose-panel{background:var(--rose-bg);border-color:var(--rose-line)}
    .rose-panel h4{color:var(--rose-text)}
    .sky-panel{background:var(--sky-bg);border-color:var(--sky-line)}
    .sky-panel h4{color:var(--sky-text)}
    .orange-panel{background:var(--orange-bg);border-color:var(--orange-line)}
    .orange-panel h4{color:var(--orange-text)}
    .grid-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
    .simple-center{text-align:center}
    .simple-center .inner{font-size:28px;padding:0 12px;min-height:112px;flex:1}
    .simple-center small{display:block;margin-top:8px;color:var(--muted);font-size:14px;text-align:center}
    .laptop{
      background:#111827; border-radius:32px; padding:14px; box-shadow:0 24px 56px rgba(15,23,42,.18);
      border:1px solid #1f2937;
    }
    .laptop-screen{background:#f8fafc; border-radius:24px; overflow:hidden}
    .window-top{
      display:flex;align-items:center;gap:8px;padding:14px 16px;background:var(--panel);border-bottom:1px solid var(--line)
    }
    .dot{width:12px;height:12px;border-radius:50%}
    .dot.red{background:#fb7185}.dot.yellow{background:#fbbf24}.dot.green{background:#34d399}
    .window-title{margin-left:8px;font-size:14px;color:var(--muted)}
    .desktop-body{padding:28px}
    .desktop-grid{
      display:grid;
      gap:22px;
      grid-template-columns:120px repeat(3,minmax(0,1fr));
      align-items:stretch;
    }
    .nav-box{
      background:var(--panel); border:1px solid var(--line); border-radius:26px; padding:16px;
    }
    .nav-box .slot{
      margin-top:9px;background:#f8fafc;border:1px solid var(--line);border-radius:16px;padding:9px;text-align:center;color:var(--muted);font-size:11px
    }
    .desktop-equal-grid{display:contents}
    .bottom-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px;margin-top:22px}
    .bottom-list{display:grid;gap:12px;margin-top:16px}
    .bottom-item{
      background:var(--panel); border:1px solid var(--line); border-radius:18px; padding:14px 16px; color:var(--muted); font-size:14px;
      box-shadow:0 4px 12px rgba(15,23,42,.05);
    }
    .desktop-main .inner{padding:0 14px;font-size:30px;min-height:96px;flex:1}
    .desktop-sub .inner{padding:0 12px;font-size:26px;min-height:90px;flex:1}
    .about{padding:18px; margin:18px 0}
    .about-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:28px}
    .about h2{font-size:25px;line-height:1.25;margin:4px 0 8px}
    .about p{margin:0;color:var(--muted)}
    .placeholder-box{background:#f8fafc;border:1px solid var(--line);border-radius:20px;padding:16px}
    .placeholder-list{display:grid;gap:12px;margin-top:16px}
    .placeholder-item{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:10px 12px;color:var(--muted);font-size:13px}


    .phone-browse{
      max-width:360px; margin:0 auto; background:#0f172a; border:10px solid #0f172a;
      border-radius:42px; padding:8px; box-shadow:0 24px 50px rgba(15,23,42,.18);
    }
    .phone-browse .phone-screen{background:#f8fafc;border-radius:34px;overflow:hidden;height:100%;display:flex;flex-direction:column}
    .phone-browse-body{padding:16px 16px 14px;display:grid;gap:14px;grid-template-rows:auto auto auto 1fr;height:100%}
    .phone-top-card{
      background:var(--panel); border:1px solid var(--line); border-radius:22px; padding:14px 16px;
    }
    .phone-top-card .meta{margin-top:6px;color:var(--muted);font-size:13px}
    .phone-s-stack{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
    .phone-s-card{
      border-radius:18px;padding:12px;border:1px solid;text-align:center;background:var(--panel);
      font-size:12px;color:var(--muted)
    }
    .phone-bottom-wide{
      border-radius:22px;border:1px solid var(--line);background:var(--panel);padding:12px 12px 14px;height:100%;display:flex;flex-direction:column;
    }
    .phone-bottom-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;flex:1}
    .phone-bottom-grid .panel .inner{min-height:90px;font-size:24px}
    .desktop-browse-shell{
      background:#111827; border-radius:30px; padding:12px; box-shadow:0 24px 56px rgba(15,23,42,.18);
      border:1px solid #1f2937; width:94%; margin-left:auto;
    }
    .desktop-browse-screen{background:#f8fafc; border-radius:24px; overflow:hidden;height:100%;display:flex;flex-direction:column}
    .desktop-browse-body{padding:16px;display:grid;grid-template-rows:auto 1fr;height:100%}
    .desktop-browse-grid{
      display:grid;
      grid-template-columns:96px minmax(0,1fr) 184px;
      gap:14px;
      align-items:stretch;
    }
    .desktop-side-stack{display:grid;gap:9px}
    .desktop-note-card{
      background:var(--panel); border:1px solid var(--line); border-radius:22px; padding:12px 14px;
    }
    .desktop-note-card .item{
      background:#f8fafc;border:1px solid var(--line);border-radius:14px;padding:6px 8px;color:var(--muted);font-size:11px;margin-top:6px
    }
    .desktop-compare-wide{
      margin-top:14px; background:var(--panel); border:1px solid var(--line); border-radius:24px; padding:12px;height:100%;display:flex;flex-direction:column;
    }
    .desktop-compare-title{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;flex:0 0 auto}
    .desktop-compare-panels{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;flex:1}
    .desktop-compare-panels .panel .inner{min-height:102px;font-size:28px}
    .works-board{background:var(--panel);border:1px solid var(--line);border-radius:28px;box-shadow:var(--shadow);padding:20px;margin:0 0 24px}
    
    
    
    .works-toolbar{display:block;position:relative;margin:12px 0 8px}
    .works-search{
      width:100%;
      border:1px solid var(--line);
      border-radius:18px;
      background:#fff;
      padding:13px 16px;
      font:inherit;
      color:var(--text);
      box-shadow:0 4px 12px rgba(15,23,42,.05)
    }
    .works-search:focus{outline:none;box-shadow:0 0 0 3px rgba(148,163,184,.18)}
    .works-dropdown{
      display:none;
      position:absolute;
      left:0;
      right:0;
      top:calc(100% + 8px);
      z-index:20;
      background:#fff;
      border:1px solid var(--line);
      border-radius:18px;
      box-shadow:var(--shadow);
      max-height:320px;
      overflow:auto;
      padding:8px;
    }
    .works-dropdown.show{display:block}
    .works-option{
      width:100%;
      text-align:left;
      background:transparent;
      border:none;
      border-radius:12px;
      padding:10px 12px;
      font:inherit;
      color:var(--text);
      cursor:pointer;
    }
    .works-option:hover,.works-option.active{background:#f8fafc}
    .entry-grid > a.card{
      display:flex;
      flex-direction:column;
      justify-content:space-between;
      min-height:158px;
    }



    .works-list{display:grid;gap:12px;margin-top:12px}
    .work-row{display:grid;grid-template-columns:110px minmax(0,1fr) 180px 130px;gap:12px;align-items:center;background:#f8fafc;border:1px solid var(--line);border-radius:18px;padding:14px 16px}
    .work-id{font-weight:700}
    .work-title{font-size:18px;font-weight:700}
    .work-meta{font-size:13px;color:var(--muted)}
    
    .process-chip{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      padding:6px 10px;
      border-radius:999px;
      font-size:12px;
      font-weight:700;
      border:1px solid var(--line);
      background:#fff;
      color:var(--muted);
      white-space:nowrap;
    }
    .process-chip.none{
      background:#f8fafc;
      color:var(--muted);
      border-color:var(--line);
    }
    .process-chip.honda{
      background:#ecfdf5;
      color:#065f46;
      border-color:#a7f3d0;
    }
    .process-chip.nagao{
      background:#eff6ff;
      color:#1d4ed8;
      border-color:#bfdbfe;
    }
    .process-chip.soseki{
      background:#fff7ed;
      color:#c2410c;
      border-color:#fdba74;
    }
    .process-chip.generic{
      background:#f8fafc;
      color:#334155;
      border-color:#cbd5e1;
    }

    .work-link{
      display:inline-flex;align-items:center;justify-content:center;
      border:1px solid var(--line);background:#fff;border-radius:999px;padding:10px 14px;font-size:14px;font-weight:700;
    }

    .works-jumps{
      display:flex;
      flex-wrap:wrap;
      gap:10px;
      align-items:center;
      justify-content:flex-start;
      margin:0;
    }
    .works-jump{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      padding:8px 14px;
      border-radius:999px;
      font-size:13px;
      font-weight:700;
      border:1px solid var(--line);
      background:#fff;
      color:var(--text);
      box-shadow:0 4px 12px rgba(15,23,42,.05);
      cursor:pointer;
      transition:transform .18s ease, box-shadow .18s ease, background .18s ease;
    }
    .works-jump:hover{transform:translateY(-1px);box-shadow:0 10px 22px rgba(15,23,42,.09)}
    .works-jump.honda{background:#ecfdf5;color:#065f46;border-color:#a7f3d0;}
    .works-jump.nagao{background:#eff6ff;color:#1d4ed8;border-color:#bfdbfe;}
    .works-jump.soseki{background:#fff7ed;color:#c2410c;border-color:#fdba74;}
    .work-row.jump-hit{
      animation: jumpGlow 1.25s ease;
    }
    @keyframes jumpGlow{
      0%{box-shadow:0 0 0 0 rgba(148,163,184,0)}
      25%{box-shadow:0 0 0 4px rgba(148,163,184,.18), 0 20px 40px rgba(15,23,42,.12)}
      100%{box-shadow:0 12px 30px rgba(15,23,42,.08)}
    }

    footer{
      border-top:1px solid var(--line); background:rgba(255,255,255,.85);
    }
    .footer-inner{
      display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
      padding:22px 0; color:var(--muted); font-size:14px;
    }

    @media (max-width: 1160px){
      .hero-grid, .about-grid, .layout-grid {grid-template-columns:1fr}
      .concept-grid {grid-template-columns:1fr}
      .desktop-grid{grid-template-columns:1fr}
      .compare-grid, .bottom-grid {grid-template-columns:1fr}
      .nav-box{display:none}
      .layout-grid{align-items:start}
      .layout-col .section-head{min-height:0}
      .showcase-frame{height:auto;padding:18px}
      .desktop-browse-shell{width:100%;margin-left:0}
    }
    @media (max-width: 960px){
      .work-row{display:grid;grid-template-columns:110px minmax(0,1fr) 180px 130px;gap:12px;align-items:center;background:#f8fafc;border:1px solid var(--line);border-radius:18px;padding:14px 16px}
    }
    /* removed older mobile block (superseded by later mobile refinement) */
      .topbar-inner{padding:12px 0;align-items:stretch;gap:12px}
      .nav{display:flex;gap:10px;flex-wrap:wrap;width:100%}
      .nav-link,.nav-cta{flex:1 1 calc(50% - 5px);justify-content:center;text-align:center;padding:10px 14px;font-size:13px}
      .hero{margin:16px 0 12px;padding:18px 20px}
      .hero h1{font-size:clamp(17px,2.2vw,26px);line-height:1.18;margin:0 0 6px;}
      .mini-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
      .section-head{align-items:flex-end;gap:10px}
      .section-head h2{font-size:26px}
      .works-board,.about{padding:14px}
      .about h2{font-size:30px}
      .desktop-body{padding:16px}
      .card{padding:14px;border-radius:20px}
      .card h3{font-size:18px;margin:0 0 6px}
      .site-title{font-size:20px;font-weight:700}
      .showcase-frame{padding:14px;border-radius:24px}
      .phone-browse,.desktop-browse-shell{max-width:100%}
      .work-row{gap:12px;padding:14px 16px;grid-template-columns:1fr}
      .work-link{width:100%}
      .desktop-main .inner{padding:34px 14px;font-size:34px}
      .desktop-sub .inner{padding:28px 14px;font-size:28px}
    
      #entry{scroll-margin-top:96px;}
      #works{scroll-margin-top:56px;}
      #about{scroll-margin-top:96px;}
  
    /* readability reset 2026-04-22 */
    .topbar-inner{padding:10px 0;gap:12px}
    .site-title{font-size:18px;line-height:1.2}
    .site-subtitle{margin-top:2px;font-size:11px}
    .nav-link,.nav-cta{
      min-height:36px;
      padding:8px 15px;
      font-size:13px;
    }

    /* 首页示意图里隐藏 先行研究・本研究，保留主体阅读线路 */
    .phone-s-stack,
    .desktop-side-stack{
      display:none;
    }
    .desktop-browse-grid{
      grid-template-columns:96px minmax(0,1fr) !important;
    }

    @media (max-width:760px){
      .hero h1{
        font-size:18px !important;
        line-height:1.4 !important;
        white-space:normal !important;
        overflow-wrap:anywhere !important;
        word-break:break-word !important;
      }
      .hero h1 span{
        display:block !important;
        margin-top:6px;
        font-size:15px !important;
        line-height:1.45 !important;
        white-space:normal !important;
        overflow-wrap:anywhere !important;
        word-break:break-word !important;
      }

      .topbar-inner{padding:8px 0;gap:8px}
      .site-title{font-size:16px}
      .site-subtitle{font-size:10px}
      .nav-link,.nav-cta{
        min-height:32px;
        padding:7px 10px;
        font-size:12px;
      }

      .hero{padding:12px 14px;margin:10px 0 10px;border-radius:20px}
      .hero h1{
        font-size:20px;
        line-height:1.35;
        white-space:normal !important;
        overflow:visible !important;
      }

      .works-board{padding:14px}
      .works-search{
        padding:11px 13px;
        font-size:14px;
      }
      .works-head{
        align-items:flex-start;
        gap:10px;
      }
      .works-head h2{
        font-size:26px;
      }
      .works-jumps{
        width:100%;
        gap:8px;
      }
      .works-jump{
        padding:7px 12px;
        font-size:12px;
      }

      .works-list{
        gap:10px;
        margin-top:10px;
      }

      .work-row{
        display:flex !important;
        flex-direction:column !important;
        align-items:stretch !important;
        gap:8px !important;
        padding:12px 14px !important;
      }

      .work-id{
        font-size:13px;
        font-weight:700;
        line-height:1.4;
      }

      .work-title{
        font-size:16px;
        line-height:1.5;
        word-break:break-word;
        white-space:normal !important;
        writing-mode:horizontal-tb !important;
        text-orientation:mixed !important;
      }

      .work-meta{
        font-size:13px;
        line-height:1.6;
        word-break:break-word;
        white-space:normal !important;
        writing-mode:horizontal-tb !important;
        text-orientation:mixed !important;
      }

      .process-chip{
        display:inline-flex;
        align-self:flex-start;
        max-width:100%;
        white-space:normal !important;
        text-align:center;
        justify-content:center;
      }

      .work-link{
        width:100% !important;
        display:block;
        text-align:center;
        margin-top:2px;
      }
    }

  
    /* works card refinement 2026-04-23 */
    .works-list{
      display:grid;
      gap:16px;
      margin-top:16px;
    }
    .work-row{
      --tone-bg-1:#ffffff;
      --tone-bg-2:#f8fafc;
      --tone-line:#cbd5e1;
      --tone-edge:#e2e8f0;
      position:relative;
      display:grid !important;
      grid-template-columns:96px minmax(0,1fr) 176px;
      gap:20px;
      align-items:center;
      padding:20px 22px !important;
      border-radius:24px;
      border:1px solid var(--tone-edge);
      background:
        radial-gradient(circle at top right, rgba(255,255,255,.88) 0%, rgba(255,255,255,0) 34%),
        linear-gradient(180deg,var(--tone-bg-1) 0%, var(--tone-bg-2) 100%);
      box-shadow:
        0 10px 26px rgba(15,23,42,.05),
        inset 0 1px 0 rgba(255,255,255,.9);
      transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease;
      overflow:hidden;
      isolation:isolate;
    }
    .work-row::before{
      content:"";
      position:absolute;
      inset:0 auto 0 0;
      width:4px;
      background:var(--tone-line);
      opacity:.96;
    }
    .work-row::after{
      content:"";
      position:absolute;
      inset:1px;
      border-radius:23px;
      border:1px solid rgba(255,255,255,.42);
      pointer-events:none;
      z-index:0;
    }
    a.work-row{
      color:inherit;
      text-decoration:none;
      cursor:pointer;
    }
    a.work-row:hover{
      transform:translateY(-3px);
      box-shadow:
        0 18px 36px rgba(15,23,42,.10),
        inset 0 1px 0 rgba(255,255,255,.95);
    }

    .work-row > *{
      position:relative;
      z-index:1;
    }

    .work-row.tone-none{
      --tone-bg-1:#ffffff;
      --tone-bg-2:#f8fafc;
      --tone-line:#cbd5e1;
      --tone-edge:#dde6ef;
    }
    .work-row.tone-honda{
      --tone-bg-1:#f7fdf9;
      --tone-bg-2:#ecfdf5;
      --tone-line:#10b981;
      --tone-edge:#b7ebd2;
    }
    .work-row.tone-nagao{
      --tone-bg-1:#f8fbff;
      --tone-bg-2:#eff6ff;
      --tone-line:#3b82f6;
      --tone-edge:#c9dcff;
    }
    .work-row.tone-soseki{
      --tone-bg-1:#fffbf5;
      --tone-bg-2:#fff7ed;
      --tone-line:#f97316;
      --tone-edge:#fed7aa;
    }
    .work-row.tone-generic{
      --tone-bg-1:#fbfcfd;
      --tone-bg-2:#f8fafc;
      --tone-line:#64748b;
      --tone-edge:#d8e1ea;
    }

    .work-id{
      justify-self:start;
      align-self:start;
      display:inline-flex;
      align-items:center;
      justify-content:center;
      min-width:68px;
      min-height:40px;
      padding:8px 13px;
      border-radius:999px;
      background:rgba(255,255,255,.82);
      border:1px solid rgba(148,163,184,.22);
      font-size:15px;
      font-weight:800;
      letter-spacing:.08em;
      color:#0f172a;
      box-shadow:
        0 4px 12px rgba(15,23,42,.04),
        inset 0 1px 0 rgba(255,255,255,.86);
      backdrop-filter:blur(6px);
    }
    .work-main{
      min-width:0;
      display:flex;
      flex-direction:column;
      gap:10px;
    }
    .work-kicker{
      font-size:11px;
      font-weight:700;
      letter-spacing:.12em;
      text-transform:uppercase;
      color:#94a3b8;
      line-height:1;
    }
    .work-title{
      font-size:21px;
      font-weight:700;
      line-height:1.38;
      letter-spacing:.01em;
      color:var(--text);
      word-break:break-word;
      font-family:"Hiragino Mincho ProN","Yu Mincho","Noto Serif JP",serif;
    }
    .work-meta{
      display:flex;
      flex-wrap:wrap;
      gap:10px 14px;
      align-items:center;
      font-size:13px;
      color:var(--muted);
      line-height:1.6;
    }
    .work-meta-item{
      position:relative;
      display:inline-flex;
      align-items:center;
      gap:6px;
      white-space:nowrap;
    }
    .work-meta-item + .work-meta-item::before{
      content:"";
      width:4px;
      height:4px;
      border-radius:50%;
      background:#cbd5e1;
      position:absolute;
      left:-9px;
      top:50%;
      transform:translateY(-50%);
    }

    .work-side{
      min-width:176px;
      display:flex;
      flex-direction:column;
      align-items:flex-end;
      justify-content:center;
      gap:10px;
    }
    .process-chip,
    .work-link{
      width:160px;
      justify-content:center;
      text-align:center;
    }
    .process-chip{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      min-height:36px;
      padding:8px 13px;
      border-radius:999px;
      font-size:12px;
      font-weight:800;
      border:1px solid var(--line);
      background:rgba(255,255,255,.88);
      color:var(--muted);
      white-space:nowrap;
      box-shadow:
        0 4px 12px rgba(15,23,42,.035),
        inset 0 1px 0 rgba(255,255,255,.82);
      backdrop-filter:blur(6px);
    }
    .process-chip.none{
      background:rgba(255,255,255,.82);
      color:#64748b;
      border-color:#dbe4ee;
    }
    .process-chip.honda{
      background:rgba(236,253,245,.95);
      color:#065f46;
      border-color:#a7f3d0;
    }
    .process-chip.nagao{
      background:rgba(239,246,255,.95);
      color:#1d4ed8;
      border-color:#bfdbfe;
    }
    .process-chip.soseki{
      background:rgba(255,247,237,.95);
      color:#c2410c;
      border-color:#fdba74;
    }
    .process-chip.generic{
      background:rgba(248,250,252,.96);
      color:#334155;
      border-color:#cbd5e1;
    }

    .work-link{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      min-height:36px;
      padding:8px 14px;
      border-radius:999px;
      border:1px solid rgba(148,163,184,.26);
      background:rgba(255,255,255,.7);
      font-size:12px;
      font-weight:800;
      letter-spacing:.06em;
      line-height:1.2;
      color:#475569;
      box-shadow:
        0 4px 12px rgba(15,23,42,.03),
        inset 0 1px 0 rgba(255,255,255,.82);
      backdrop-filter:blur(6px);
      transition:background .18s ease, color .18s ease, border-color .18s ease;
    }
    .work-link::after{
      content:"→";
      font-size:13px;
      margin-left:6px;
    }
    .work-row:hover .work-link{
      background:rgba(255,255,255,.92);
      color:#0f172a;
      border-color:rgba(100,116,139,.3);
    }

    @media (max-width: 960px){
      .work-row{
        grid-template-columns:86px minmax(0,1fr) 156px !important;
        gap:16px;
      }
      .work-title{
        font-size:19px;
      }
      .work-side{
        min-width:156px;
      }
      .process-chip,
      .work-link{
        width:100%;
      }
    }

    @media (max-width: 760px){
      .works-list{
        gap:12px;
        margin-top:12px;
      }
      .work-row{
        grid-template-columns:1fr !important;
        gap:12px !important;
        padding:15px 15px 14px !important;
        border-radius:20px;
      }
      .work-row::before{
        width:100%;
        height:4px;
        inset:0 0 auto 0;
      }
      .work-row::after{
        border-radius:19px;
      }
      .work-id{
        min-width:58px;
        min-height:34px;
        padding:6px 11px;
        font-size:13px;
      }
      .work-main{
        gap:8px;
      }
      .work-kicker{
        font-size:10px;
      }
      .work-title{
        font-size:18px !important;
        line-height:1.52 !important;
      }
      .work-meta{
        gap:8px 12px;
        font-size:13px !important;
        line-height:1.62 !important;
      }
      .work-meta-item{
        white-space:normal;
      }
      .work-meta-item + .work-meta-item::before{
        display:none;
      }
      .work-side{
        min-width:0;
        width:100%;
        align-items:flex-end;
        gap:8px;
      }
      .process-chip,
      .work-link{
        width:152px;
        max-width:100%;
      }
      .process-chip{
        white-space:normal !important;
        text-align:center;
      }
      .work-link{
        font-size:12px;
      }
    }

  

/* mini cards overflow fix 2026-04-25 */
.hero-grid{
  grid-template-columns:1.05fr 1fr !important;
  gap:18px !important;
}

.mini-grid{
  grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  gap:10px !important;
  min-width:0 !important;
}

.mini-box{
  min-width:0 !important;
  min-height:88px !important;
  padding:12px 10px !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:center !important;
  overflow:hidden !important;
}

.mini-box strong{
  max-width:100% !important;
  font-size:clamp(18px,1.7vw,21px) !important;
  line-height:1.25 !important;
  white-space:nowrap !important;
  word-break:keep-all !important;
  letter-spacing:-0.04em !important;
  transform-origin:center center !important;
}

.mini-box span{
  max-width:100% !important;
  margin-top:9px !important;
  font-size:clamp(12px,1.1vw,14px) !important;
  line-height:1.35 !important;
  white-space:normal !important;
  text-align:center !important;
}

@media (max-width:760px){
  .hero-grid{
    grid-template-columns:1fr !important;
  }
  .mini-grid{
    grid-template-columns:1fr !important;
  }
  .mini-box strong{
    white-space:normal !important;
    letter-spacing:0 !important;
  }
}


/* restore definitive full note in mini card 2026-04-25 */
.mini-box span{
  white-space:normal !important;
  overflow-wrap:break-word !important;
  word-break:normal !important;
  line-height:1.45 !important;
}

.mini-box span br{
  display:block !important;
}


/* flatten mini cards 2026-04-25 */
.mini-box{
  min-height:72px !important;
  padding:8px 10px !important;
  border-radius:22px !important;
}

.mini-box strong{
  font-size:clamp(17px,1.55vw,20px) !important;
  line-height:1.15 !important;
}

.mini-box span{
  margin-top:5px !important;
  font-size:clamp(11px,1vw,13px) !important;
  line-height:1.25 !important;
}

.mini-grid{
  gap:8px !important;
}

.hero{
  padding:14px 18px !important;
}

.hero-grid{
  gap:14px !important;
}


/* flatten entry cards 2026-04-25 */
.entry-grid{
  gap:12px !important;
  margin:8px 0 12px !important;
}

.entry-grid > a.card{
  min-height:112px !important;
}

.card{
  padding:12px 14px !important;
  border-radius:20px !important;
}

.card h3{
  font-size:17px !important;
  margin:0 0 4px !important;
  line-height:1.25 !important;
}

.card p{
  font-size:12px !important;
  line-height:1.35 !important;
}

.tag{
  margin-bottom:6px !important;
  padding:3px 9px !important;
  font-size:10px !important;
}

.card .cta{
  margin-top:6px !important;
  font-size:13px !important;
}


/* tighten topbar and hero gap 2026-04-25 */
.topbar-inner{
  padding:7px 0 !important;
}

.hero{
  margin:8px 0 8px !important;
  padding:12px 18px !important;
}

@media (max-width:760px){
  .topbar-inner{
    padding:6px 0 !important;
  }

  .hero{
    margin:6px 0 8px !important;
    padding:10px 14px !important;
  }
}


/* process jump cards 2026-04-25 */
.works-jumps{
  display:grid !important;
  grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  gap:12px !important;
  width:100% !important;
  margin-top:10px !important;
}

.works-jump{
  min-height:82px !important;
  padding:14px 16px !important;
  border-radius:20px !important;
  box-shadow:var(--shadow) !important;
  font-size:15px !important;
  line-height:1.35 !important;
  flex-direction:column !important;
}

.works-jump::after{
  content:"該当作品へ移動";
  display:block;
  margin-top:6px;
  font-size:11px;
  font-weight:600;
  opacity:.72;
}

@media (max-width:760px){
  .works-jumps{
    grid-template-columns:1fr !important;
    gap:8px !important;
  }

  .works-jump{
    min-height:58px !important;
    padding:10px 14px !important;
    font-size:14px !important;
  }
}


/* process cards bilingual labels 2026-04-25 */
.works-jump strong{
  display:block;
  font-size:15px;
  line-height:1.25;
}

.works-jump span{
  display:block;
  margin-top:5px;
  font-size:11px;
  line-height:1.25;
  font-weight:600;
  opacity:.78;
}

.works-jump::after{
  margin-top:7px !important;
}


/* back to top floating button 2026-04-25 */
.back-to-top{
  position:fixed;
  right:22px;
  bottom:24px;
  z-index:80;
  width:52px;
  height:52px;
  border-radius:999px;
  border:1px solid var(--line);
  background:#92400e;
  color:#fff;
  box-shadow:0 14px 32px rgba(146,64,14,.25);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:22px;
  font-weight:800;
  cursor:pointer;
  transition:transform .18s ease, box-shadow .18s ease, opacity .18s ease;
}

.back-to-top:hover{
  transform:translateY(-2px);
  box-shadow:0 18px 38px rgba(146,64,14,.32);
}

@media (max-width:760px){
  .back-to-top{
    right:14px;
    bottom:16px;
    width:46px;
    height:46px;
    font-size:20px;
  }
}


/* back to top closer to content 2026-04-25 */
.back-to-top{
  right:calc((100vw - min(1320px, 100vw)) / 2 + 24px) !important;
  bottom:28px !important;
}

@media (max-width:760px){
  .back-to-top{
    right:18px !important;
    bottom:18px !important;
  }
}


/* back to top move outside content 2026-04-25 */
.back-to-top{
  right:max(24px, calc((100vw - min(1320px, 100vw)) / 2 - 72px)) !important;
  bottom:28px !important;
}

@media (max-width:760px){
  .back-to-top{
    right:14px !important;
    bottom:18px !important;
  }
}


/* works title bilingual 2026-04-25 */
.works-title-en{
  display:inline-block;
  margin-left:10px;
  font-size:18px;
  font-weight:700;
  color:var(--muted);
  vertical-align:baseline;
}

@media (max-width:760px){
  .works-title-en{
    display:block;
    margin-left:0;
    margin-top:4px;
    font-size:13px;
  }
}


/* unsticky topbar 2026-04-25 */
.topbar{
  position:static !important;
  top:auto !important;
}


/* compact work cards 2026-04-25 */
.works-list{
  gap:8px !important;
  margin-top:8px !important;
}

.work-row{
  padding:12px 16px !important;
  border-radius:18px !important;
  grid-template-columns:82px minmax(0,1fr) 150px !important;
  gap:14px !important;
}

.work-id{
  min-height:32px !important;
  min-width:54px !important;
  padding:5px 10px !important;
  font-size:13px !important;
}

.work-main{
  gap:5px !important;
}

.work-title{
  font-size:18px !important;
  line-height:1.25 !important;
}

.work-meta{
  font-size:12px !important;
  line-height:1.35 !important;
}

.work-side{
  min-width:140px !important;
  gap:6px !important;
}

.process-chip,
.work-link{
  width:140px !important;
  min-height:30px !important;
  padding:5px 10px !important;
  font-size:11px !important;
}

@media (max-width:760px){
  .work-row{
    padding:11px 13px !important;
    gap:8px !important;
  }

  .work-title{
    font-size:16px !important;
  }

  .work-side{
    width:100% !important;
    min-width:0 !important;
  }
}


/* ultra compact work cards 2026-04-25 */
.works-board{
  padding:14px !important;
}

.works-list{
  gap:5px !important;
  margin-top:6px !important;
}

.work-row{
  padding:7px 12px !important;
  border-radius:14px !important;
  grid-template-columns:68px minmax(0,1fr) 122px !important;
  gap:10px !important;
  min-height:58px !important;
}

.work-row::before{
  width:3px !important;
}

.work-id{
  min-height:26px !important;
  min-width:46px !important;
  padding:3px 8px !important;
  font-size:12px !important;
}

.work-main{
  gap:2px !important;
}

.work-title{
  font-size:16px !important;
  line-height:1.18 !important;
}

.work-meta{
  font-size:11px !important;
  line-height:1.25 !important;
  gap:6px 10px !important;
}

.work-side{
  min-width:112px !important;
  gap:4px !important;
}

.process-chip,
.work-link{
  width:112px !important;
  min-height:24px !important;
  padding:3px 8px !important;
  font-size:10px !important;
}

.work-link::after{
  font-size:10px !important;
  margin-left:4px !important;
}

@media (max-width:760px){
  .work-row{
    padding:9px 11px !important;
    min-height:auto !important;
    gap:6px !important;
  }

  .work-title{
    font-size:15px !important;
  }

  .work-meta{
    font-size:11px !important;
  }
}


/* unify top title and hide archive eyebrow 2026-04-25 */
.topbar{
  position:static !important;
  top:auto !important;
}

.topbar .eyebrow{
  display:none !important;
}

.topbar-inner{
  padding:6px 0 !important;
  align-items:center !important;
}

.site-title,
.page-title{
  font-size:17px !important;
  line-height:1.2 !important;
  font-weight:700 !important;
}

.site-subtitle,
.page-subtitle{
  margin-top:2px !important;
  font-size:10px !important;
  line-height:1.2 !important;
  color:var(--muted) !important;
}

@media (max-width:760px){
  .site-title,
  .page-title{
    font-size:15px !important;
  }

  .site-subtitle,
  .page-subtitle{
    font-size:9px !important;
  }
}


/* precise process jump offset 2026-04-25 */
.work-row{
  scroll-margin-top:16px !important;
}


/* clearer process jump target highlight 2026-04-25 */
.work-row.jump-hit{
  animation: jumpGlowStrong 1.6s ease !important;
}

@keyframes jumpGlowStrong{
  0%{
    transform:translateY(0);
    box-shadow:0 0 0 0 rgba(146,64,14,0);
  }
  18%{
    transform:translateY(-2px);
    box-shadow:0 0 0 5px rgba(146,64,14,.18), 0 18px 36px rgba(15,23,42,.14);
  }
  100%{
    transform:translateY(0);
    box-shadow:0 10px 26px rgba(15,23,42,.05);
  }
}


/* home balanced layout 2026-04-25 */

/* 顶部标题：清楚但不占高 */
.topbar-inner{
  padding:5px 0 !important;
}

.site-title{
  font-size:17px !important;
  line-height:1.22 !important;
}

.site-subtitle{
  font-size:10px !important;
  margin-top:2px !important;
}

/* 大说明区：整体适中 */
.hero{
  margin:8px 0 10px !important;
  padding:14px 18px !important;
  border-radius:24px !important;
}

.hero-grid{
  grid-template-columns:1.15fr .85fr !important;
  gap:16px !important;
}

.hero h1{
  font-size:22px !important;
  line-height:1.28 !important;
}

.hero h1 span{
  font-size:13px !important;
  line-height:1.35 !important;
}

/* 四个说明卡：协调、扁平、清楚 */
.mini-grid{
  gap:8px !important;
}

.mini-box{
  min-height:70px !important;
  padding:8px 10px !important;
  border-radius:18px !important;
}

.mini-box strong{
  font-size:17px !important;
  line-height:1.18 !important;
}

.mini-box span{
  margin-top:4px !important;
  font-size:11px !important;
  line-height:1.25 !important;
}

/* 作品区整体 */
.works-board{
  padding:14px !important;
  border-radius:24px !important;
  margin-bottom:18px !important;
}

.works-head{
  margin-bottom:8px !important;
}

.works-head h2{
  font-size:24px !important;
  line-height:1.15 !important;
}

.works-title-en{
  font-size:15px !important;
  margin-left:8px !important;
}

/* 三张添削/推敲卡片：像入口卡，但不要太大 */
.works-jumps{
  gap:8px !important;
  margin-top:8px !important;
}

.works-jump{
  min-height:58px !important;
  padding:8px 12px !important;
  border-radius:16px !important;
  font-size:13px !important;
}

.works-jump strong{
  font-size:13px !important;
  line-height:1.2 !important;
}

.works-jump span{
  margin-top:3px !important;
  font-size:10px !important;
  line-height:1.15 !important;
}

.works-jump::after{
  margin-top:4px !important;
  font-size:9px !important;
}

/* 搜索框 */
.works-toolbar{
  margin:8px 0 6px !important;
}

.works-search{
  padding:9px 12px !important;
  border-radius:14px !important;
  font-size:13px !important;
}

/* 作品卡片：细，但不拥挤 */
.works-list{
  gap:6px !important;
  margin-top:8px !important;
}

.work-row{
  min-height:62px !important;
  padding:8px 13px !important;
  border-radius:15px !important;
  grid-template-columns:70px minmax(0,1fr) 126px !important;
  gap:10px !important;
}

.work-id{
  min-width:46px !important;
  min-height:27px !important;
  padding:3px 8px !important;
  font-size:12px !important;
}

.work-main{
  gap:3px !important;
}

.work-title{
  font-size:16px !important;
  line-height:1.22 !important;
}

.work-meta{
  font-size:11px !important;
  line-height:1.3 !important;
}

.work-side{
  min-width:120px !important;
  gap:4px !important;
}

.process-chip,
.work-link{
  width:120px !important;
  min-height:25px !important;
  padding:3px 8px !important;
  font-size:10px !important;
}

/* 返回顶部按钮稍微弱化 */
.back-to-top{
  width:44px !important;
  height:44px !important;
  font-size:18px !important;
  opacity:.9 !important;
}

@media (max-width:760px){
  .hero-grid{
    grid-template-columns:1fr !important;
  }

  .hero{
    padding:12px 14px !important;
  }

  .hero h1{
    font-size:18px !important;
  }

  .mini-grid{
    grid-template-columns:1fr !important;
  }

  .works-jumps{
    grid-template-columns:1fr !important;
  }

  .work-row{
    grid-template-columns:1fr !important;
    min-height:auto !important;
    padding:10px 12px !important;
  }

  .work-side{
    width:100% !important;
    min-width:0 !important;
    align-items:flex-end !important;
  }
}


/* unified homepage button style 2026-04-25 */
button,
.btn,
.nav-btn,
a.btn,
a.card-link,
.work-card a,
.entry-card a{
  min-height:30px !important;
  padding:6px 12px !important;
  border-radius:999px !important;
  font-size:12px !important;
  font-weight:800 !important;
  line-height:1.15 !important;
}

/* Mobile work card tag nowrap */
@media (max-width: 640px) {
  .work-row .tag,
  .work-row .small-tag,
  .work-row [class*="tag"] {
    white-space: nowrap !important;
    word-break: keep-all !important;
    font-size: 12px !important;
    line-height: 1.4 !important;
  }
}

/* Final mobile fix: keep 原稿・草稿テクストなし in one line */
@media (max-width: 640px) {
  .process-chip.none {
    white-space: nowrap !important;
    word-break: keep-all !important;
    overflow-wrap: normal !important;
    display: inline-flex !important;
    max-width: none !important;
    width: auto !important;
    font-size: 11px !important;
    line-height: 1.25 !important;
  }
}

/* iPhone 12 / mobile: keep process-chip none in one line */
@media (max-width: 430px) {
  .work-row {
    grid-template-columns: 1fr !important;
  }

  .work-row .process-chip,
  .work-row .process-chip.none,
  .process-chip.none {
    display: inline-flex !important;
    width: fit-content !important;
    max-width: 100% !important;
    white-space: nowrap !important;
    word-break: keep-all !important;
    overflow-wrap: normal !important;
    font-size: 10px !important;
    line-height: 1.2 !important;
    padding: 5px 9px !important;
    letter-spacing: 0 !important;
  }
}