:root { --paper:#EEEAE1; --ink:#111; --acc:#FF4D00; --mute:#5b574f; --line:2.5px solid var(--ink); }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--paper); color:var(--ink); font:400 16px/1.5 'Inter Tight',system-ui,sans-serif;
  background-image:radial-gradient(rgba(0,0,0,.08) 1.1px, transparent 1.2px); background-size:22px 22px; }
a { color:inherit; }
.wrap { max-width:1240px; margin:0 auto; padding:0 16px 40px; }
.mono, .eb, .chip, .tags, .copy, .hl, .pr p { font-family:'JetBrains Mono',ui-monospace,monospace; }

.top { display:flex; align-items:center; gap:12px; padding:16px 0; }
.brand { display:flex; align-items:center; gap:10px; font-weight:800; font-size:19px; letter-spacing:-.02em; text-decoration:none; }
.brand img { width:36px; height:36px; border-radius:50%; border:var(--line); }
.sp { flex:1; }
.hl { display:inline-flex; align-items:center; height:38px; padding:0 16px; border:var(--line); border-radius:19px; background:var(--ink); color:#fff;
  font-weight:700; font-size:14px; letter-spacing:.04em; text-decoration:none; }

.hero { padding:28px 0 26px; }
.eb { font-size:13px; font-weight:600; letter-spacing:.14em; margin:0; }
h1 { margin:18px 0 0; line-height:.92; }
.t1 { display:block; font-weight:800; letter-spacing:-.05em; font-size:clamp(44px, 9vw, 104px); }
.t2 { display:block; font-family:'Instrument Serif',serif; font-style:italic; font-weight:400; color:var(--acc); letter-spacing:-.02em;
  font-size:clamp(52px, 10.5vw, 124px); }
.lead { max-width:640px; font-size:clamp(17px, 2vw, 20px); color:#2b2924; margin:22px 0 0; }
.row { display:flex; flex-wrap:wrap; gap:12px; margin-top:24px; }
.btn { display:inline-flex; align-items:center; height:50px; padding:0 22px; border:var(--line); border-radius:25px; background:var(--acc); color:#fff;
  font-weight:700; font-size:16px; text-decoration:none; box-shadow:4px 4px 0 var(--ink); transition:transform .12s, box-shadow .12s; }
.btn:hover { transform:translate(-1px,-1px); box-shadow:5px 5px 0 var(--ink); }
.btn.ghost { background:#fff; color:var(--ink); }

.filters { position:sticky; top:0; z-index:5; display:flex; gap:8px; overflow-x:auto; padding:12px 16px; margin:0 -16px;
  background:rgba(238,234,225,.94); backdrop-filter:blur(6px); scrollbar-width:none; }
.filters::-webkit-scrollbar { display:none; }
.chip { flex:none; height:38px; padding:0 14px; border:var(--line); border-radius:19px; background:#fff; color:var(--ink); cursor:pointer;
  font-size:13px; font-weight:700; letter-spacing:.04em; }
.chip b { margin-left:4px; color:var(--acc); }
.chip.on { background:var(--ink); color:#fff; }

.grid { display:grid; grid-template-columns:1fr; gap:22px; margin-top:14px; }
@media (min-width:720px) { .grid { grid-template-columns:1fr 1fr; } }
@media (min-width:1100px) { .grid { grid-template-columns:1fr 1fr 1fr; } }
.card { background:#fff; border:var(--line); border-radius:18px; overflow:hidden; box-shadow:6px 6px 0 var(--ink); display:flex; flex-direction:column; }
.card[hidden] { display:none; }
.vid { aspect-ratio:1080/660; background:var(--paper); border-bottom:var(--line); }
.vid video { display:block; width:100%; height:100%; object-fit:cover; }
.body { padding:14px 16px 16px; display:flex; flex-direction:column; flex:1; }
.tags { display:flex; flex-wrap:wrap; gap:6px 10px; font-size:12px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; }
.ind { color:var(--acc); }
.word { color:var(--mute); }
h3 { margin:6px 0 10px; font-size:26px; font-weight:800; letter-spacing:-.03em; line-height:1.1; }
.pr { margin-top:auto; border:2px solid var(--ink); border-radius:12px; background:#faf8f3; padding:12px; }
.pr p { margin:0 0 12px; font-size:13px; line-height:1.55; color:#222; }
.copy { width:100%; height:40px; border:var(--line); border-radius:20px; background:#fff; color:var(--ink); cursor:pointer;
  font-size:13px; font-weight:700; letter-spacing:.06em; }
.copy:hover { background:var(--ink); color:#fff; }
.copy.done { background:var(--acc); border-color:var(--acc); color:#fff; }

.packs { margin-top:56px; }
.packs h2 { font-size:clamp(28px, 4vw, 40px); letter-spacing:-.04em; line-height:1.05; margin:0 0 18px; }
.pgrid { display:grid; gap:16px; }
@media (min-width:860px) { .pgrid { grid-template-columns:1fr 1.15fr 1fr; align-items:stretch; } }
.pack { display:flex; flex-direction:column; gap:8px; padding:20px; border:var(--line); border-radius:18px; background:#fff; text-decoration:none;
  box-shadow:6px 6px 0 var(--ink); transition:transform .12s; }
.pack:hover { transform:translate(-1px,-1px); }
.pack.dark { background:var(--ink); color:#fff; }
.pn { font-weight:800; font-size:22px; letter-spacing:-.02em; }
.pp { font-family:'Instrument Serif',serif; font-style:italic; font-size:48px; line-height:1; color:var(--acc); }
.pd { color:inherit; opacity:.8; font-size:15px; }
.go { margin-top:auto; padding-top:8px; font-weight:700; }
.note { color:var(--mute); font-size:14px; margin:16px 0 0; }

footer { margin-top:48px; padding-top:18px; border-top:var(--line); color:var(--mute); font-size:13px; }
footer p { margin:0 0 6px; }

.toast { position:fixed; left:50%; bottom:24px; transform:translate(-50%, 20px); opacity:0; pointer-events:none; z-index:10;
  background:var(--ink); color:#fff; border-radius:22px; padding:10px 18px; font:700 14px 'JetBrains Mono',monospace; transition:.2s; }
.toast.show { opacity:1; transform:translate(-50%, 0); }
@media (prefers-reduced-motion:reduce) { .vid video { display:none; } .vid { background-size:cover; } }

/* 業種を選んだときの帯と、下の「業種だけ」の列 */
.indbar { display:flex; align-items:center; gap:12px; justify-content:space-between; margin-top:12px; padding:12px 16px;
  border:var(--line); border-radius:14px; background:var(--ink); color:#fff; text-decoration:none; box-shadow:4px 4px 0 var(--acc); }
.indbar[hidden] { display:none; }
.indbar b { font-weight:800; }
.indbar .ip { flex:none; font-family:'JetBrains Mono',monospace; font-weight:700; color:var(--acc); }
.just { margin:30px 0 12px; font-size:20px; letter-spacing:-.02em; }
.irow { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
@media (min-width:860px) { .irow { grid-template-columns:repeat(5, 1fr); } }
.ipk { display:flex; flex-direction:column; gap:2px; padding:12px 14px; border:var(--line); border-radius:14px; background:#fff; text-decoration:none;
  box-shadow:4px 4px 0 var(--ink); transition:transform .12s; }
.ipk:hover { transform:translate(-1px,-1px); }
.ipk .in { font-weight:800; font-size:17px; letter-spacing:-.02em; }
.ipk .ic { font-size:13px; color:var(--mute); }
.ipk .ip { font-family:'JetBrains Mono',monospace; font-weight:700; color:var(--acc); margin-top:4px; }