/* Layout: a calm tool shop. Wide hero (copy left, drifting tool cards right), then one reading column (760px) for detail.
   Motion is the brand's one bold move: slow, eased, "liquid" (smooth scroll + long ease-out curves). Everything else stays quiet. */
:root{
  --bg:#ffffff; --ink:#242422; --muted:#5d6068; --line:#dcdfe3; --soft:#f4f5f7; --thumb:#eceef2;
  --accent:#203864; --accent-ink:#ffffff; --mark:#fff27a; --found:#2f7d5b;
  --note:#fff4d6; --note-ink:#5a4710;
  --logo-filter:none; --shadow:0 18px 40px rgba(20,30,50,.12); --header-bg:rgba(255,255,255,.86);
  --f-body:"Zen Kaku Gothic New","Hiragino Sans","Yu Gothic",system-ui,sans-serif;
  --f-mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;
  --ease:cubic-bezier(.16,1,.3,1);
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --bg:#15181c; --ink:#e7e9ec; --muted:#a3a9b2; --line:#2e333a; --soft:#1c2026; --thumb:#1f242b;
  --accent:#9db4e0; --accent-ink:#101826; --mark:#5a5210; --found:#6fc79c;
  --note:#3a3112; --note-ink:#f2e1a6;
  --logo-filter:invert(1); --shadow:0 18px 40px rgba(0,0,0,.5); --header-bg:rgba(21,24,28,.86); color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#15181c; --ink:#e7e9ec; --muted:#a3a9b2; --line:#2e333a; --soft:#1c2026; --thumb:#1f242b;
  --accent:#9db4e0; --accent-ink:#101826; --mark:#5a5210; --found:#6fc79c;
  --note:#3a3112; --note-ink:#f2e1a6;
  --logo-filter:invert(1); --shadow:0 18px 40px rgba(0,0,0,.5); --header-bg:rgba(21,24,28,.86); color-scheme:dark}
*{box-sizing:border-box}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
body{margin:0;background:var(--bg);color:var(--ink);font:400 16px/1.9 var(--f-body);padding-inline:clamp(16px,4vw,48px);padding-block:0 96px}
.wrap{max-width:1200px;margin:0 auto}
.lead,.message p,.flow>p,ul.plain{max-width:46em}
.wide{max-width:1200px;margin:0 auto}
a{color:var(--accent)}
a:focus-visible,button:focus-visible,summary:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
p{margin:0}
.flow{display:grid;gap:14px}
mark{background:linear-gradient(transparent 55%,var(--mark) 55%);color:inherit;padding:0 1px}
.draft{background:var(--note);color:var(--note-ink);font-size:13px;line-height:1.7;padding:8px 12px;border-radius:3px;margin-top:12px}
.todo{background:var(--note);color:var(--note-ink);padding:0 4px;border-radius:2px;font-size:13px}

/* header: sticky, hides on scroll down, returns on scroll up */
header.site{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;margin-inline:calc(-1 * clamp(16px,4vw,48px));padding:18px clamp(16px,4vw,48px);background:var(--header-bg);backdrop-filter:saturate(1.4) blur(10px);-webkit-backdrop-filter:saturate(1.4) blur(10px);border-bottom:1px solid var(--line);transition:transform .6s var(--ease)}
header.site.hide{transform:translateY(-110%)}
header.site .in{max-width:1200px;margin:0 auto;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 20px}
.brand{display:inline-flex;align-items:center;gap:10px;color:var(--ink);text-decoration:none}
.brand svg{width:30px;height:30px;flex:none}
.brand b{font:500 17px/1 var(--f-mono);letter-spacing:.28em}
nav.global{display:flex;flex-wrap:wrap;gap:4px 20px;font-size:14px}
nav.global a{color:var(--muted);text-decoration:none;position:relative}
nav.global a::after{content:"";position:absolute;left:0;right:0;bottom:-3px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform .5s var(--ease)}
nav.global a:hover,nav.global a[aria-current="page"]{color:var(--ink)}
nav.global a:hover::after,nav.global a[aria-current="page"]::after{transform:scaleX(1);transform-origin:left}
.crumb{font-size:13px;color:var(--muted);margin-top:18px}
.crumb ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:0 6px}
.crumb li+li::before{content:"／";margin-right:6px}
.crumb a{color:var(--muted)}

h1{font-size:clamp(25px,3.8vw,32px);font-weight:700;line-height:1.5;text-wrap:balance;margin:28px 0 12px}
.crumb + h1{margin-top:10px}
h2{font-size:21px;font-weight:700;line-height:1.5;text-wrap:balance;margin:clamp(72px,10vw,128px) 0 22px;padding-top:28px;border-top:1px solid var(--line)}
h3{font-size:16px;font-weight:700;line-height:1.6;margin:0}
.eyebrow{font:500 12px/1 var(--f-mono);letter-spacing:.18em;color:var(--muted);text-transform:uppercase}
.lead{font-size:17px}
.sub{color:var(--muted)}
.meta{font:400 13px/1.7 var(--f-mono);color:var(--muted);margin-top:10px}
.fine{font-size:13.5px;color:var(--muted);line-height:1.75}

/* ---------- hero (top page) ---------- */
.hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:32px clamp(40px,6vw,96px);align-items:center;padding-block:clamp(64px,10vw,140px) clamp(48px,7vw,96px)}
.hero>*{min-width:0}
.hero .logo-big{display:flex;align-items:center;gap:14px;margin-bottom:22px}
.hero .logo-big svg{width:52px;height:52px}
.hero .logo-big b{font:500 22px/1 var(--f-mono);letter-spacing:.32em}
.copy{font-size:clamp(30px,4.6vw,54px);font-weight:500;line-height:1.5;letter-spacing:.08em;margin:0}
.copy .ln{display:block;overflow:hidden;padding-bottom:.06em}
.copy .ln>span{display:inline-block}
.copy em{font-style:normal;color:var(--found)}
.hero .eyebrow{margin-bottom:22px}
.hero .tag{margin-top:28px;font-size:16.5px;color:var(--muted);letter-spacing:.04em}
.hero .btns{margin-top:40px}
.stage{position:relative;aspect-ratio:1.05;max-width:100%;min-height:260px}
.chip-card{position:absolute;background:var(--bg);border:1px solid var(--line);border-radius:8px;box-shadow:var(--shadow);overflow:hidden;display:grid;grid-template-rows:auto 1fr}
.chip-card .bar{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:8px 12px;font-size:12px;border-bottom:1px solid var(--line);background:var(--soft)}
.chip-card .bar b{font-weight:700}
.chip-card .bar span{font:400 11px var(--f-mono);color:var(--muted)}
.chip-card img,.chip-card svg{display:block;width:100%;height:100%;object-fit:cover}
.c1{width:72%;left:0;top:14%;z-index:2;animation:drift 9s ease-in-out infinite}
.c2{width:52%;right:0;top:0;z-index:1;animation:drift 11s ease-in-out -3s infinite}
.c3{width:50%;right:4%;bottom:0;z-index:3;animation:drift 10s ease-in-out -6s infinite}
@keyframes drift{0%,100%{transform:translate3d(0,0,0) rotate(0)}50%{transform:translate3d(0,-10px,0) rotate(-.4deg)}}
@media (max-width:820px){.hero{grid-template-columns:1fr;padding-block:36px 24px}.stage{aspect-ratio:1.3}}

.message{margin:clamp(24px,4vw,48px) 0 0;display:grid;gap:20px}
.message h2{border-top:0;padding-top:0;margin:0;font-size:clamp(22px,3vw,27px)}

/* buttons: fill sweeps in from the left */
.btns{display:flex;flex-wrap:wrap;gap:10px}
.btn{position:relative;overflow:hidden;isolation:isolate;display:inline-flex;align-items:center;gap:10px;font:700 15px/1.4 var(--f-body);padding:13px 22px;border-radius:999px;text-decoration:none;cursor:pointer;transition:color .5s var(--ease),border-color .5s var(--ease)}
.btn::before{content:"";position:absolute;inset:0;z-index:-1;transform:scaleX(0);transform-origin:right;transition:transform .6s var(--ease)}
.btn:hover::before{transform:scaleX(1);transform-origin:left}
.btn.primary{background:var(--ink);color:var(--bg);border:1px solid var(--ink)}
.btn.primary::before{background:var(--accent)}
.btn.primary:hover{border-color:var(--accent);color:var(--accent-ink)}
.btn.secondary{background:transparent;color:var(--ink);border:1px solid var(--line)}
.btn.secondary::before{background:var(--ink)}
.btn.secondary:hover{color:var(--bg);border-color:var(--ink)}
.btn.off{cursor:not-allowed}
.btn .ic{transition:transform .6s var(--ease)}
.btn:hover .ic{transform:translateX(4px)}

figure{margin:20px 0 0}
figure img{display:block;width:100%;max-width:100%;height:auto;border:1px solid var(--line);border-radius:4px}
figcaption{font-size:13.5px;color:var(--muted);margin-top:8px}

ul.plain,ol.plain{margin:0;padding-left:1.3em;display:grid;gap:6px}
.tbl{overflow-x:auto}
table{border-collapse:collapse;width:100%;font-size:15px;font-variant-numeric:tabular-nums}
th,td{text-align:left;padding:10px 8px;border-bottom:1px solid var(--line);vertical-align:top}
th{font-weight:500;color:var(--muted);width:30%}
.kv th{white-space:nowrap}
.cmp th{width:auto}
.cmp thead th{font-size:13px}
.ways th{width:34%}
.ways tr.ours th,.ways tr.ours td{color:var(--ink);font-weight:500}

.fit{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:16px}
.fit>div{min-width:0;padding:16px 18px;border:1px solid var(--line);border-radius:6px}
.fit h3{margin-bottom:8px}

ol.steps{list-style:none;margin:0;padding:0;display:grid;gap:12px;counter-reset:s}
ol.steps li{counter-increment:s;display:grid;grid-template-columns:2em 1fr;gap:0 10px}
ol.steps li::before{content:counter(s);font:500 15px/1.85 var(--f-mono);color:var(--muted)}
ol.steps li>div{min-width:0}

details{border-bottom:1px solid var(--line);padding-block:12px}
summary{cursor:pointer;font-weight:700}
details p{margin-top:6px;color:var(--muted)}

/* tool cards */
.cards{list-style:none;margin:16px 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,280px),1fr));gap:64px 40px}
.cards>li{min-width:0}
.card{display:grid;gap:10px;color:var(--ink);text-decoration:none}
.card .thumb{position:relative;aspect-ratio:16/10;max-width:100%;background:var(--thumb);border-radius:6px;overflow:hidden;display:grid;place-items:center}
.card .thumb img,.card .thumb svg{width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--ease)}
.card .kind{font-size:12.5px;color:var(--muted);letter-spacing:.04em}
.card h3{display:flex;gap:8px;align-items:flex-start;font-size:17.5px;line-height:1.55}
.arrow{flex:none;width:22px;height:22px;margin-top:3px;border:1px solid var(--line);border-radius:50%;display:grid;place-items:center;font-size:11px;color:var(--ink);transition:background .5s var(--ease),color .5s var(--ease),border-color .5s var(--ease),transform .6s var(--ease)}
.card p{font-size:14.5px;color:var(--muted)}
.state{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;padding:2px 10px;border-radius:999px;border:1px solid var(--line);color:var(--muted);justify-self:start}
.state.on{color:var(--found);border-color:currentColor}
.state.on::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
a.card:hover .thumb img{transform:scale(1.05)}
a.card:hover .arrow,.more:hover .arrow{background:var(--ink);color:var(--bg);border-color:var(--ink);transform:translateX(3px)}
a.card:hover h3 .t{text-decoration:underline;text-underline-offset:3px}
div.card{cursor:default}
div.card .thumb::after{content:"準備中";position:absolute;right:10px;top:10px;font-size:11.5px;padding:2px 9px;border-radius:999px;background:var(--bg);color:var(--muted);border:1px solid var(--line)}

.more{display:inline-flex;align-items:center;gap:8px;text-decoration:none;color:var(--ink);font-weight:500}
.more .arrow{margin-top:0}

/* plans */
.plans{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr));gap:16px;margin-top:20px}
.plan{min-width:0;display:grid;grid-template-rows:auto auto auto 1fr auto;gap:10px;padding:22px 20px;border:1px solid var(--line);border-radius:10px;background:var(--bg);transition:transform .7s var(--ease),box-shadow .7s var(--ease)}
.plan:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.plan.pick{border-color:var(--ink);border-width:2px}
.plan .pname{font-weight:700;font-size:17px}
.plan .pfor{font-size:13.5px;color:var(--muted)}
.plan .pprice{font:500 26px/1.2 var(--f-mono)}
.plan .pprice small{font:400 13px var(--f-body);color:var(--muted)}
.plan ul{margin:0;padding-left:1.2em;font-size:14.5px;display:grid;gap:4px;align-content:start}
.plan .ribbon{justify-self:start;font-size:12px;padding:2px 10px;border-radius:999px;background:var(--ink);color:var(--bg)}

/* buy section on tool page */
.buybox{display:grid;gap:12px;margin-top:20px;padding:24px;border:1px solid var(--line);border-radius:10px;background:var(--soft)}
.price{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px}
.price b{font:500 32px/1 var(--f-mono)}
.price span{color:var(--muted);font-size:14px}

/* office block */
.maker{display:grid;grid-template-columns:120px 1fr;gap:18px;align-items:center;padding:20px;background:var(--soft);border-radius:8px}
.maker>div{min-width:0;display:grid;gap:6px}
.maker img.logo{width:120px;height:auto;max-width:100%;filter:var(--logo-filter)}
@media (max-width:440px){.maker{grid-template-columns:1fr}.maker img.logo{width:96px}}

.news{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.news li{display:grid;grid-template-columns:7.5em 1fr;gap:4px 12px;padding:12px 4px;border-bottom:1px solid var(--line)}
.news time{font:400 14px var(--f-mono);color:var(--muted)}
.news li>div{min-width:0}
@media (max-width:440px){.news li{grid-template-columns:1fr}}

.copyrow{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:14px}
.copyrow code{font:500 16px var(--f-mono);border:1px solid var(--line);padding:6px 10px;border-radius:3px;user-select:all}
.copyrow button{font:500 13px var(--f-body);padding:7px 14px;border:1px solid var(--line);background:var(--bg);color:var(--ink);cursor:pointer;border-radius:3px}

footer.site{margin-top:clamp(96px,12vw,160px);padding-top:16px;border-top:1px solid var(--line);font-size:13px;color:var(--muted);display:grid;gap:8px}
footer.site nav{display:flex;flex-wrap:wrap;gap:4px 18px}
footer.site a{color:var(--muted)}

/* ---------- motion ---------- */
/* hero lines rise once on load */
.js .copy .ln>span{transform:translateY(105%);animation:rise 1.2s var(--ease) forwards}
.js .copy .ln:nth-child(2)>span{animation-delay:.12s}
.js .hero .tag,.js .hero .btns,.js .hero .logo-big{opacity:0;transform:translateY(14px);animation:fadeup 1.1s var(--ease) .35s forwards}
.js .hero .btns{animation-delay:.5s}
.js .stage{opacity:0;transform:translateY(24px) scale(.98);animation:fadeup 1.4s var(--ease) .25s forwards}
@keyframes rise{to{transform:none}}
@keyframes fadeup{to{opacity:1;transform:none}}
/* scroll reveal: fade + rise, images open like a shutter */
.rv-pre{opacity:0;transform:translateY(28px)}
.rv-in{opacity:1;transform:none;transition:opacity 1.1s var(--ease),transform 1.1s var(--ease);transition-delay:var(--d,0s)}
.rv-img.rv-pre{opacity:1;transform:none;clip-path:inset(0 0 100% 0)}
.rv-img.rv-in{clip-path:inset(0 0 0 0);transition:clip-path 1.3s var(--ease);transition-delay:var(--d,0s)}

/* corner shortcut (tool page): slides in from the right */
.corner{position:fixed;right:16px;bottom:calc(16px + env(safe-area-inset-bottom,0px));z-index:15;display:flex;align-items:center;gap:12px;padding:10px 10px 10px 16px;background:var(--ink);color:var(--bg);border-radius:999px;box-shadow:var(--shadow);text-decoration:none;font-weight:700;font-size:14.5px;transform:translateX(calc(100% + 40px));transition:transform .9s var(--ease)}
.corner.show{transform:none}
.corner .go{width:34px;height:34px;border-radius:50%;background:var(--bg);color:var(--ink);display:grid;place-items:center;transition:transform .6s var(--ease)}
.corner:hover .go{transform:translateY(3px)}
.corner button{border:0;background:none;color:inherit;opacity:.7;font-size:15px;cursor:pointer;padding:0 6px 0 0}

@media (prefers-reduced-motion:reduce){
  .js .copy .ln>span,.js .hero .tag,.js .hero .btns,.js .hero .logo-big,.js .stage{animation:none;opacity:1;transform:none}
  .c1,.c2,.c3{animation:none}
  .rv-pre,.rv-img.rv-pre{opacity:1;transform:none;clip-path:none}
  *{transition-duration:0s!important}
}

/* 購入後のダウンロード（thanks / download） */
.dl{margin:32px 0 8px;padding:28px;border:1px solid var(--line, rgba(127,127,127,.25));border-radius:14px}
.dl-items{list-style:none;margin:0 0 12px;padding:0;display:grid;gap:14px}
.dl-items li{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 24px}
/* お試し版の受け取りフォーム */
.trial{margin:18px 0 10px;padding:18px;border:1px solid var(--line);border-radius:6px;display:grid;gap:10px;max-width:640px}
.trial>label:first-child{font-size:13px;color:var(--sub)}
.trial-row{display:flex;flex-wrap:wrap;gap:10px}
.trial input[type=email]{flex:1 1 240px;min-width:0;font:400 16px var(--f-body);padding:10px 12px;border:1px solid var(--line);border-radius:4px;background:var(--bg);color:var(--ink)}
.trial .chk{display:flex;gap:8px;align-items:flex-start;font-size:13px;line-height:1.6}
.trial .chk input{margin-top:4px}
.trial-msg:empty{display:none}
/* ログイン（2026-10-08）：HITTADE 共通の会員ログイン。今はウェブのツール（app.hittade.com）で開く */
nav.global a.login{color:var(--ink);border:1px solid var(--line);border-radius:999px;padding:3px 14px;margin-top:-4px;margin-bottom:-4px}
nav.global a.login::after{display:none}
nav.global a.login:hover{border-color:var(--ink)}

/* 2026-10-20 白地に黒一色（中馬さん指示：weekend.osaka のような、はっきりした一色・太めのゴシック・グラデーションなし）。各ツールの印は各ツールの鮮やかな色 */
html:root{--bg:#ffffff;--ink:#000000;--muted:#000000;--line:#000000;--soft:#ffffff;--thumb:#ffffff;--accent:#000000;--accent-ink:#ffffff;--shadow:none;--header-bg:#ffffff;--mark:#000000;
  --t-mitsumori:#E86A00;--t-hikage:#0000FF;--t-sekisan:#E6002E;--t-hojo:#00965F;--t-compe:#7A00F0}
@media (prefers-color-scheme: dark){html:root:not([data-theme="light"]){--bg:#0e0e0e;--ink:#ffffff;--muted:#ffffff;--line:#ffffff;--soft:#0e0e0e;--thumb:#0e0e0e;--accent:#ffffff;--accent-ink:#000000;--header-bg:#0e0e0e;--mark:#ffffff;
  --t-mitsumori:#FF9640;--t-hikage:#6680FF;--t-sekisan:#FF4D6A;--t-hojo:#2ED18F;--t-compe:#B370FF}}
html:root[data-theme="dark"]{--bg:#0e0e0e;--ink:#ffffff;--muted:#ffffff;--line:#ffffff;--soft:#0e0e0e;--thumb:#0e0e0e;--accent:#ffffff;--accent-ink:#000000;--header-bg:#0e0e0e;--mark:#ffffff;
  --t-mitsumori:#FF9640;--t-hikage:#6680FF;--t-sekisan:#FF4D6A;--t-hojo:#2ED18F;--t-compe:#B370FF}
body{font-weight:500;letter-spacing:.04em}
h1,h2,h3,h4,.copy,nav.global a,header.site a,.btn,th,dt,b,strong{font-weight:700!important}
h1,h2,.copy{letter-spacing:.08em}
nav.global a,header.site nav a{letter-spacing:.12em}
*,*::before,*::after{box-shadow:none!important;text-shadow:none!important;border-radius:0!important}
.state.on::before,.corner .go,.arrow{border-radius:50%!important}
mark{background:none;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:3px}
header.site{border-bottom:2px solid var(--ink)!important}
.btn{border-width:2px!important}
.btn.primary{background:var(--ink)!important;color:var(--bg)!important;border-color:var(--ink)!important}
.btn.secondary{background:var(--bg)!important;color:var(--ink)!important;border:2px solid var(--ink)!important}
.chip-card,.hs{border:2px solid var(--ink)!important;background:var(--bg)!important}
.chip-card .bar,.hs .bar{background:var(--tc,var(--ink))!important;color:#fff!important;border:0!important}
.chip-card .bar b,.hs .bar b{color:#fff!important;letter-spacing:.1em}
.chip-card.c1{--tc:var(--t-mitsumori)} .hs{--tc:var(--t-hikage)} .chip-card.c3{--tc:var(--t-sekisan)} .chip-card.c4{--tc:var(--t-hojo)} .chip-card.c5{--tc:var(--t-compe)}
.chip-card.c1,.hs,.chip-card.c3,.chip-card.c4,.chip-card.c5{border-color:var(--tc)!important}
html .cards .card[href*="design-fee"]{--tc:var(--t-mitsumori)} html .cards .card[href*="shadow"]{--tc:var(--t-hikage)} html .cards .card[href*="sekisan"]{--tc:var(--t-sekisan)} html .cards .card[href*="/hojo/"]{--tc:var(--t-hojo)} html .cards .card[href*="/compe/"]{--tc:var(--t-compe)}
.cards .card .thumb{border:2px solid var(--tc)}
.cards .card .thumb img{clip-path:none!important}
.cards .card .kind{color:var(--tc)!important}
.cards .card h3 .t{color:var(--tc)}
.fit>div,.plan,.buybox,.maker,.dl,.trial{border:2px solid var(--ink)!important}
.plan .ribbon{background:var(--ink)!important;color:var(--bg)!important}
.corner{background:var(--ink)!important}

/* 2026-10-20 HITTADE の文字をゴシックの太字に（中馬さん 12:35） */
.brand b{font-family:var(--f-body)!important;font-weight:700!important;letter-spacing:.14em!important}

/* 2026-10-20 ツール一覧のカードは文字・線・画面の写真まで各ツールの色一色に（中馬さん 12:51）。有料・管理者でカードの行き先がツール本体に変わっても色が付くよう、画像で見分ける */
html .cards .card:has(img[src*="mitsumori"]){--tc:var(--t-mitsumori)} html .cards .card:has(img[src*="shadow"]){--tc:var(--t-hikage)} html .cards .card:has(img[src*="sekisan"]){--tc:var(--t-sekisan)} html .cards .card:has(img[src*="hojo"]){--tc:var(--t-hojo)} html .cards .card:has(img[src*="compe"]){--tc:var(--t-compe)}
.cards .card,.cards .card *{color:var(--tc)!important}
.cards .card .state,.cards .card .arrow{border-color:var(--tc)!important}
.cards .card:hover .arrow{background:var(--tc)!important;color:var(--bg)!important}
.cards .card h3 .t{text-decoration-color:var(--tc)!important}
.cards a.card .thumb{position:relative}
.cards a.card .thumb img{filter:grayscale(1) contrast(1.15)}
.cards a.card .thumb::after{content:"";position:absolute;inset:0;background:var(--tc);mix-blend-mode:screen;pointer-events:none}
.chip-card img,.hs .fig{filter:grayscale(1) contrast(1.15)}
.chip-card::after,.hs::after{content:"";position:absolute;inset:0;background:var(--tc);mix-blend-mode:screen;pointer-events:none;z-index:1}
.chip-card .bar,.hs .bar{position:relative;z-index:2}

/* 2026-10-20 各ツールの説明ページ（とツールに関する資料）は文字・線・ボタンまでそのツールの色一色に（中馬さん 13:42「各種説明文もテーマカラーに」） */
html:has(link[rel="canonical"][href*="/tools/design-fee/"]){--tc:var(--t-mitsumori)}
html:has(link[rel="canonical"][href*="/tools/shadow/"]),html:has(link[rel="canonical"][href*="/guide/shadow-"]){--tc:var(--t-hikage)}
html:has(link[rel="canonical"][href*="/tools/sekisan/"]){--tc:var(--t-sekisan)}
html:has(link[rel="canonical"][href*="/tools/hojo/"]){--tc:var(--t-hojo)}
html:has(link[rel="canonical"][href*="/tools/compe/"]){--tc:var(--t-compe)}
html:has(link[rel="canonical"][href*="/tools/"]),html:has(link[rel="canonical"][href*="/guide/shadow-"]){--ink:var(--tc);--muted:var(--tc);--line:var(--tc);--accent:var(--tc);--mark:var(--tc)}
html:has(link[rel="canonical"][href*="/tools/"]) main figure,html:has(link[rel="canonical"][href*="/guide/shadow-"]) main figure{position:relative}
html:has(link[rel="canonical"][href*="/tools/"]) main figure img,html:has(link[rel="canonical"][href*="/guide/shadow-"]) main figure img{filter:grayscale(1) contrast(1.15)}
html:has(link[rel="canonical"][href*="/tools/"]) main figure::after,html:has(link[rel="canonical"][href*="/guide/shadow-"]) main figure::after{content:"";position:absolute;inset:0;background:var(--tc);mix-blend-mode:screen;pointer-events:none}

/* 2026-10-20 デジタルな動き（C：打ち込み表示／A+B：ブロックが崩れて文字が記号から現れる） */
.ty-on .ty-c{visibility:hidden}
.ty-on .ty-c.ty-v{visibility:visible}
.ty-cur{display:inline-block;width:.55em;height:1.05em;background:currentColor;vertical-align:-.15em;margin-left:1px;animation:ty-blink .5s steps(1) infinite}
@keyframes ty-blink{50%{opacity:0}}
.cards a.card .thumb .blk{position:absolute;inset:0;z-index:2;display:grid;grid-template-columns:repeat(10,1fr);grid-template-rows:repeat(6,1fr);pointer-events:none}
.cards a.card .thumb .blk i{background:var(--tc)}
.dc-g{font-family:var(--f-mono);opacity:.85}
@media (prefers-reduced-motion: reduce){.ty-on .ty-c{visibility:visible}.ty-cur,.cards a.card .thumb .blk{display:none}}

/* 2026-10-21 打ち込み表示は見出しの下の文（サブテキスト）だけにする（中馬さん 10/21 09:43「タイトルがタイプだと読みづらい。サブテキストをタイプモーションに」）。見出しは元の動きに戻す。
   打ち込む文は上がる動きをせず、始まるまで隠しておく（読み込めなかったときは2.5秒で表示） */
@keyframes ty-hold{to{visibility:visible}}
.js .hero .tag{opacity:1;transform:none;animation:none}
.js .hero .tag:not(.ty-on):not(.ty-done),.js main h1+p.lead:not(.ty-on):not(.ty-done),.js main h1+p.sub:not(.ty-on):not(.ty-done){visibility:hidden;animation:ty-hold 0s 2.5s forwards}
.message.rv-pre{transform:none!important}.message.rv-in{transform:none!important;transition:opacity 1.1s var(--ease)!important}
.js main .ty-wait{visibility:hidden}
@media (prefers-reduced-motion: reduce){.js .hero .tag,.js main h1+p.lead,.js main h1+p.sub{visibility:visible!important;animation:none!important}}

/* 2026-10-20 携帯での表示（中馬さん 20:34「携帯で表示した際のレイアウトにも配慮」） */
/* 見出しは言葉の途中で折り返さない（句読点・空白・かっこで折り返し、入りきらないときだけ途中で折る） */
main h1,main h2,main h3,.copy,.hero .tag,.cards .card h3{word-break:keep-all;overflow-wrap:anywhere;line-break:strict}
/* 資料へのリンクの一覧：点と矢印が二重にならないように */
ul.plain:has(> li > a.more){padding-left:0;list-style:none}
ul.plain > li > a.more{align-items:flex-start}
ul.plain > li > a.more .arrow{flex:none;margin-top:.25em}
@media (max-width:640px){
  /* ヘッダー：1段目にロゴとログイン、2段目にメニューを1行で（はみ出す分は横に送る） */
  header.site{padding-block:12px}
  header.site .in{position:relative;display:block}
  header.site .brand{display:inline-flex;min-height:34px;align-items:center}
  nav.global{flex-wrap:nowrap;overflow-x:auto;gap:0 12px;margin-top:8px;padding-bottom:4px;font-size:12px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  nav.global::-webkit-scrollbar{display:none}
  nav.global a{flex:none;letter-spacing:.03em}
  nav.global > a.login,nav.global > .hd-acct{position:absolute;right:0;top:0;margin:0}
  nav.global > a.login{display:inline-flex;align-items:center;min-height:34px;padding:0 14px}
  /* ボタンは横幅いっぱいにそろえる */
  main .btns{display:grid;grid-template-columns:minmax(0,1fr);gap:10px}
  main .btns .btn{justify-content:space-between;width:100%;margin:0}
}

/* 2026-10-21 ツール一覧のカードの文字も打ち込み表示（枠で囲まれた「無料の機能あり」などは対象外。中馬さん 09:45）。打ち込む文字は上がる動きをしない */
.cards>li.rv-pre{transform:none!important}.cards>li.rv-in{transform:none!important;transition:opacity 1.1s var(--ease)!important}

/* 2026-10-21 ツール名を短くした（中馬さん 10:14）。ベータ版は名前から外して小さな枠の印に */
.beta{display:inline-block;margin-left:.6em;padding:1px 7px;border:1px solid currentColor;font-size:11px;line-height:1.6;letter-spacing:.06em;font-weight:700;vertical-align:middle;white-space:nowrap}
h1 .beta{font-size:13px;vertical-align:.35em}

/* 2026-10-21 ボタンにカーソルを重ねたとき文字が消えないよう、塗りに合わせて文字の色を反転（中馬さん 12:03） */
.btn.secondary:hover,.btn.secondary:focus-visible{color:var(--bg)!important}
.btn.secondary:hover .ic,.btn.secondary:focus-visible .ic{color:inherit}

/* 2026-10-22 ツール一覧のブロックを 32×20 に細かく（中馬さん 07:26） */
.cards a.card .thumb canvas.blk{display:block;width:100%;height:100%;image-rendering:crisp-edges;image-rendering:pixelated}

/* 2026-10-22 最初のページのシートもブロックで覆ってから見せる（中馬さん 09:21） */
.hs-stage canvas.hb{position:absolute;inset:0;width:100%;height:100%;z-index:3;display:block;image-rendering:crisp-edges;image-rendering:pixelated;pointer-events:none}
.js .hs-stage:not(.hb-on)>.chip-card::before,.js .hs-stage:not(.hb-on)>.hs::before{content:"";position:absolute;inset:0;background:var(--tc);z-index:3;animation:hb-hold 0s 2.5s forwards}
@keyframes hb-hold{to{visibility:hidden}}
@media (prefers-reduced-motion: reduce){.js .hs-stage>.chip-card::before,.js .hs-stage>.hs::before,.hs-stage canvas.hb{display:none}}

/* 2026-10-22 ブロックで見せるもの（最初のページのシート・ツール一覧のカード）は、ふわっと上がりながら現れる動きをやめる（中馬さん 09:29） */

/* 2026-10-22 ブロックの出方を「白 → ツールの色 → 中身」に。枠も同じマスごとに現れる（中馬さん 16:13） */
.js .hs-stage>.chip-card::before,.js .hs-stage>.hs::before{display:none!important}
canvas.bk{position:absolute;inset:0;width:100%;height:100%;z-index:4;display:block;image-rendering:crisp-edges;image-rendering:pixelated;pointer-events:none}
@media (prefers-reduced-motion: reduce){.js .hs-stage>.chip-card,.js .hs-stage>.hs,.js .cards a.card .thumb{visibility:visible!important;animation:none!important}canvas.bk{display:none}}