/* Decorative artwork is separate from live, translated text and calculation UI. */
.illustrated-tools{--banner-paper:#f3f0e9;--banner-ink:#283436;--banner-muted:#5d6869;--banner-wash:rgba(243,240,233,.98);--banner-clear:rgba(243,240,233,0)}
:root[data-theme="dark"] .illustrated-tools{--banner-paper:#18212a;--banner-ink:#f1eee6;--banner-muted:#c3c9c9;--banner-wash:rgba(24,33,42,.98);--banner-clear:rgba(24,33,42,0)}
.illustrated-tools .wrap{padding-top:24px}
.illustrated-tools .topbar nav{flex-wrap:wrap}
.illustrated-tools .tool-hero{position:relative;isolation:isolate;overflow:hidden;margin:0 0 28px;border:1px solid var(--line);border-radius:10px;background:var(--banner-paper);min-height:190px}
.tool-hero>.banner-image{position:absolute;z-index:-2;inset:0 0 0 auto;width:64%;height:100%;object-fit:cover;object-position:76% 52%}
.tool-hero::before{content:"";position:absolute;z-index:-1;inset:0;background:linear-gradient(90deg,var(--banner-wash) 0%,var(--banner-wash) 40%,var(--banner-clear) 88%)}
.tool-hero-copy{padding:30px 32px;width:66%;position:relative}
.tool-hero h1{margin:0 0 12px;color:var(--banner-ink);font-family:"Shippori Mincho B1","Yu Mincho","Hiragino Mincho ProN",serif;font-size:29px;line-height:1.5;letter-spacing:.055em;text-wrap:balance}
.tool-hero h1 small{display:block;margin:0 0 9px;color:var(--banner-muted);font-family:Arial,sans-serif;font-size:10px;font-weight:500;letter-spacing:.25em}
.tool-hero .lead{margin:0;color:var(--banner-ink);font-size:14px;line-height:1.95;max-width:640px;text-wrap:pretty}
.tool-hero .lead a{color:inherit;text-decoration:underline;text-underline-offset:3px}
.tool-hero.hero-entrance{min-height:296px;margin-bottom:28px}
.hero-entrance>.banner-image{width:75%;object-position:right 43%}
.hero-entrance::before{background:linear-gradient(90deg,var(--banner-wash),var(--banner-wash) 25%,var(--banner-clear) 72%)}
.hero-entrance .tool-hero-copy{padding:48px 36px;width:68%}
.hero-entrance h1{font-size:40px;margin-bottom:18px;letter-spacing:.045em}
.hero-entrance .lead{max-width:480px;font-size:14px}
.tool-hero.hero-hub{min-height:214px}
.illustrated-tools .doors{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.illustrated-tools .doors>li,.illustrated-tools .cards>li{min-width:0}
.illustrated-tools .illustrated-door,.illustrated-tools .illustrated-card{padding:0;overflow:hidden;background:var(--card);border:1px solid var(--line);border-radius:9px;box-shadow:0 3px 12px rgba(35,39,40,.025);transition:border-color .2s,box-shadow .2s,transform .2s}
.illustrated-tools .illustrated-door:hover,.illustrated-tools .illustrated-card:hover{border-color:var(--gold2);box-shadow:0 6px 20px rgba(35,39,40,.08);transform:translateY(-2px)}
.illustrated-tools .illustrated-door:focus-within{border-color:var(--accent)}
.illustrated-tools .illustrated-door .go:focus-visible{outline:3px solid var(--accent);outline-offset:-3px}
.banner-heading{position:relative;isolation:isolate;display:flex;align-items:flex-end;min-height:184px;overflow:hidden;background:var(--banner-paper)}
.banner-heading>.banner-image{position:absolute;z-index:-2;inset:0;width:100%;height:100%;object-fit:cover;object-position:75% 53%}
.banner-heading.art-sky>.banner-image{object-position:75% 34%}
.banner-heading::before{content:"";position:absolute;z-index:-1;inset:0;background:linear-gradient(0deg,var(--banner-wash),var(--banner-clear) 75%),linear-gradient(90deg,var(--banner-wash),var(--banner-clear) 70%)}
.banner-label{padding:24px 24px 20px;width:100%}
.illustrated-tools .banner-label .no{margin:0 0 6px;padding:0;color:var(--banner-muted);font-size:10px;letter-spacing:.2em;line-height:1.4}
.illustrated-tools .banner-label b{margin:0;color:var(--banner-ink);font-family:"Shippori Mincho B1","Yu Mincho","Hiragino Mincho ProN",serif;font-weight:600;font-size:25px;line-height:1.45;letter-spacing:.055em}
.illustrated-tools .illustrated-door .go>p{padding:17px 24px 18px;margin:0;font-size:13.5px;color:var(--ink);line-height:1.9}
.illustrated-tools .illustrated-door>.sub{margin:0 24px;padding:12px 0 15px;border-top:1px solid var(--line2);gap:2px 16px;font-size:12px;line-height:1.9}
.illustrated-door>.sub a{text-decoration:none;display:inline-block;padding:3px 0}
.illustrated-door>.sub a:hover{text-decoration:underline;text-underline-offset:3px}
.illustrated-tools .cards{gap:16px}
.illustrated-card .banner-heading{min-height:142px}
.illustrated-card .banner-label{padding:18px}
.illustrated-tools .illustrated-card .banner-label b{font-size:21px;letter-spacing:.02em}
.illustrated-tools .illustrated-card>p{margin:0;padding:14px 18px 18px;font-size:13px;line-height:1.85;color:var(--ink)}
.illustrated-tools .illustrated-card>.m{margin:0 18px;padding:11px 0 16px;font-size:12px}
.is-space{--banner-paper:#090e13;--banner-ink:#f0f0e9;--banner-muted:#c3c9ca;--banner-wash:rgba(9,14,19,.94);--banner-clear:rgba(9,14,19,0)}
.is-space.banner-heading::before{background:linear-gradient(90deg,rgba(5,9,13,.84),rgba(5,9,13,.28) 53%,transparent),linear-gradient(0deg,rgba(5,9,13,.8),transparent 60%)}
.illustrated-tools .door-reading{grid-column:1/-1}
.door-reading .banner-heading{min-height:210px;background:var(--banner-paper)}
.door-reading .banner-image{left:auto;right:0;width:72%;height:100%;object-fit:cover;object-position:72% 63%}
.door-reading .banner-heading::before{background:linear-gradient(90deg,var(--banner-wash) 0%,var(--banner-wash) 25%,var(--banner-clear) 67%)}
.door-reading .banner-label{padding:30px;width:48%;align-self:center}
.door-reading .banner-label b{font-size:29px}
.door-reading .go>p{border-top:1px solid var(--line2)}
:root[data-theme="dark"] .tool-hero>.banner-image,:root[data-theme="dark"] .banner-heading>.banner-image{filter:brightness(.76) saturate(.68)}
:root[data-theme="dark"] .is-space>.banner-image{filter:none}
@media(min-width:1100px){.illustrated-tools .hero-entrance{min-height:312px}.illustrated-tools:has(.hero-entrance)>.wrap{max-width:1024px}}
@media(max-width:650px){
  .illustrated-tools .topbar{align-items:flex-start;gap:10px;padding:10px 12px}
  .illustrated-tools .brand{flex-shrink:0;font-size:14px;padding-top:2px}
  .illustrated-tools .topbar nav{justify-content:flex-end;gap:3px 10px;font-size:11px;line-height:1.8}
  .illustrated-tools .wrap{padding:16px 12px 48px}
  .illustrated-tools .tool-hero{min-height:0;margin-bottom:22px}
  .tool-hero>.banner-image{width:100%;height:124px;object-position:72% 51%}
  .tool-hero::before{top:70px;height:56px;background:linear-gradient(0deg,var(--banner-paper),var(--banner-clear))}
  .tool-hero-copy{padding:142px 20px 23px;width:100%}
  .tool-hero h1{font-size:25px;line-height:1.55;letter-spacing:.025em;margin-bottom:10px;overflow-wrap:anywhere}
  .tool-hero .lead{font-size:13px;line-height:1.9}
  .hero-entrance>.banner-image{height:168px;object-position:75% 48%}
  .hero-entrance::before{top:100px;height:70px;background:linear-gradient(0deg,var(--banner-paper),var(--banner-clear))}
  .hero-entrance .tool-hero-copy{padding:185px 22px 27px;width:100%}
  .hero-entrance h1{font-size:29px;letter-spacing:.025em}
  .hero-entrance h1 small{font-size:9px;margin-bottom:8px}
  .illustrated-tools .doors{grid-template-columns:minmax(0,1fr);gap:16px}
  .illustrated-tools .banner-heading{min-height:166px}
  .banner-label{padding:22px 20px 18px}
  .illustrated-tools .banner-label b{font-size:24px}
  .illustrated-tools .illustrated-door .go>p{padding:15px 20px 17px}
  .illustrated-tools .illustrated-door>.sub{margin:0 20px;padding-top:10px;font-size:12px}
  .door-reading .banner-image{width:100%;height:100%;object-position:75% 62%;object-fit:cover}
  .door-reading .banner-heading{min-height:200px;padding-top:0}
  .door-reading .banner-heading::before{background:linear-gradient(0deg,var(--banner-wash),var(--banner-clear) 75%),linear-gradient(90deg,var(--banner-wash),var(--banner-clear) 70%)}
  .door-reading .banner-label{width:100%;padding:20px}
  .illustrated-tools .cards{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .illustrated-card .banner-heading{min-height:135px}
  .illustrated-card .banner-label{padding:14px}
  .illustrated-tools .illustrated-card .banner-label b{font-size:18px}
  .illustrated-tools .illustrated-card>p{font-size:12.5px;padding:12px 14px 15px}
}
@media(max-width:420px){.illustrated-tools .cards{grid-template-columns:minmax(0,1fr)}.illustrated-card .banner-heading{min-height:140px}.illustrated-tools .illustrated-card .banner-label b{font-size:21px}}
@media(prefers-reduced-motion:reduce){.illustrated-tools .illustrated-door,.illustrated-tools .illustrated-card{transition:none;transform:none}}
@media print{
  .illustrated-tools{--banner-paper:#fff;--banner-ink:#000;--banner-muted:#444}
  .tool-hero>.banner-image,.banner-heading>.banner-image,.tool-hero::before,.banner-heading::before{display:none!important}
  .illustrated-tools .tool-hero,.illustrated-tools .hero-entrance,.illustrated-tools .hero-hub{min-height:0;background:#fff;border:0;margin:0 0 16px}
  .tool-hero .tool-hero-copy,.hero-entrance .tool-hero-copy{padding:0;width:100%}
  .tool-hero h1,.tool-hero .lead,.tool-hero .lead a,.illustrated-tools .banner-label b,.illustrated-tools .banner-label .no{color:#000}
  .illustrated-tools .banner-heading{min-height:0;padding:0;background:#fff}
  .banner-label,.door-reading .banner-label{padding:12px 18px;width:100%}
  .illustrated-tools .illustrated-card,.illustrated-tools .illustrated-door{break-inside:avoid;box-shadow:none}
}

/* 帯は薄く。絵の面積で操作が遠くならないように（2026-09-06 夜、ユーザー指摘） */
.illustrated-tools .tool-hero,.illustrated-tools .hero-hub,.illustrated-tools .hero-entrance,.tool-hero.hero-entrance,.tool-hero.hero-hub{min-height:0;margin:0 0 16px}
.tool-hero-copy{padding:16px 22px 14px;width:70%}
.tool-hero h1{font-size:22px;line-height:1.35;margin:0 0 4px}
.tool-hero h1 small{margin:0 0 4px}
.tool-hero .lead{font-size:13px;line-height:1.65}
.hero-entrance .tool-hero-copy{padding:20px 26px 18px;width:70%}
.hero-entrance h1{font-size:30px;margin-bottom:8px}
.hero-entrance .lead{font-size:13px}
@media(min-width:1100px){.illustrated-tools .hero-entrance{min-height:0}}
@media(max-width:650px){
  .illustrated-tools .tool-hero,.illustrated-tools .hero-entrance{margin-bottom:12px}
  .tool-hero>.banner-image,.hero-entrance>.banner-image{position:absolute;inset:0 0 0 auto;width:46%;height:100%;object-position:70% 50%}
  .tool-hero::before,.hero-entrance::before{inset:0;top:0;height:auto;background:linear-gradient(90deg,var(--banner-wash) 0%,var(--banner-wash) 62%,var(--banner-clear) 100%)}
  .tool-hero-copy,.hero-entrance .tool-hero-copy{padding:11px 13px 10px;width:76%}
  .tool-hero h1,.hero-entrance h1{font-size:19px;line-height:1.3;margin-bottom:3px}
  .tool-hero h1 small,.hero-entrance h1 small{font-size:8.5px;margin-bottom:3px}
  .tool-hero .lead,.hero-entrance .lead{font-size:12px;line-height:1.5}
}