.about-page{padding-top:24px}.about-page .crumb{font-size:14px}.about-hero{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:64px;align-items:center;padding:52px 0 76px}.about-hero h1{font-size:clamp(30px,3.7vw,52px);line-height:1.45;margin:20px 0 24px}.about-intro{font-size:18px;line-height:2;color:var(--site-muted)}.about-intro p{margin:0}.about-art{aspect-ratio:1;background:#F3E4CC;border-radius:48px;transform:rotate(2deg);display:grid;place-items:center}.about-art img{width:80%;height:80%;object-fit:contain;transform:rotate(-2deg)}.about-page h2{font-size:30px}.about-values{padding-bottom:80px}.about-values ol{list-style:none;padding:0;margin:30px 0 0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}.about-values li{padding:30px;background:#fff;border:1px solid var(--site-border);border-radius:28px}.value-number{display:grid;place-items:center;width:48px;height:48px;border-radius:16px;background:#DDEBE2;color:#245A41;font-size:20px;font-weight:700}.about-values li:nth-child(2) .value-number{background:#F5DED1;color:#8A3B1B}.about-values li:nth-child(3) .value-number{background:#E4E6EE;color:#3E4560}.about-values h3{font-size:22px;margin:18px 0 12px}.about-values p{margin:0;color:var(--site-muted)}.about-notebook{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:60px;padding:64px 0;border-block:1px solid var(--site-border)}.about-notebook p{color:var(--site-muted)}.notebook-date-note{font-size:14px}.notebook-list{list-style:none;margin:0;padding:0}.notebook-entry{display:grid;grid-template-columns:96px 88px minmax(0,1fr) 20px;gap:16px;align-items:start;border-bottom:1px solid var(--site-border);padding:24px 0;text-decoration:none!important;color:var(--site-ink)!important}.notebook-entry:hover h3{text-decoration:underline;color:var(--site-green)}.notebook-entry time{font-size:14px;padding-top:4px;color:var(--site-muted)}.notebook-medium{border-radius:999px;padding:4px 10px;font-size:13px;font-weight:700;text-align:center;white-space:nowrap}.notebook-medium.paper{background:#F3E4CC;color:#6B4A12}.notebook-medium.screen{background:#E4E6EE;color:#3E4560}.notebook-copy h3{font-size:19px;margin:0 0 6px}.notebook-copy p{font-size:15px;margin:0}.notebook-history summary{cursor:pointer;color:var(--site-green);min-height:48px;padding:16px 0;font-weight:700}.notebook-history summary:focus-visible{outline:3px solid var(--site-accent);outline-offset:4px}.about-request{margin-top:72px;padding:48px;background:#DDEBE2;border-radius:32px;display:flex;align-items:center;justify-content:space-between;gap:36px}.about-request h2{font-size:28px;margin:0 0 12px}.about-request p{margin:0;color:#2F4A3C}.request-action{flex-shrink:0;text-align:center}.about-request-button{font:inherit;font-weight:700;border:0;border-radius:999px;min-height:56px;padding:14px 26px;background:var(--site-green);color:#fff}.about-request-button:disabled{background:#EAF1EC;color:#4F4B43;border:1px solid #8BA494;cursor:not-allowed}.request-action #request-status{font-size:14px;margin-top:8px}@media(max-width:1000px){.about-hero{gap:32px}.about-values ol{gap:16px}.about-values li{padding:24px}.about-notebook{grid-template-columns:1fr;gap:16px}.about-request{padding:32px;flex-wrap:wrap}}@media(max-width:600px){.about-page{padding-top:16px}.about-hero{grid-template-columns:1fr;padding:24px 0 48px;gap:32px}.about-intro{font-size:16px}.about-art{width:min(100%,280px);justify-self:center;border-radius:32px}.about-page h2{font-size:26px}.about-values{padding-bottom:48px}.about-values ol{grid-template-columns:1fr;margin-top:24px}.about-notebook{padding:40px 0}.notebook-entry{grid-template-columns:100px minmax(0,1fr) 20px;gap:12px;padding:24px 0}.notebook-medium{justify-self:start}.notebook-copy{grid-column:1/3;grid-row:2}.notebook-arrow{grid-column:3;grid-row:2}.about-request{margin-top:48px;padding:28px 24px;gap:24px}.about-request h2{font-size:24px}.request-action{width:100%}.about-request-button{max-width:100%;width:100%}}


/* Personal album excerpts, separate from the teaching illustration catalog. */
.about-hero-album{grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);padding-bottom:48px;gap:48px}
.about-page figure{margin:0}
.album-dream{padding:28px 24px 20px;background:#fff;border:1px solid var(--site-border);border-radius:16px;box-shadow:0 8px 24px #443b2910;transform:rotate(2deg)}
.album-dream img,.album-comment img,.album-drawing img{display:block;width:100%;height:auto}
.about-page figcaption{font-size:12px;line-height:1.7;color:var(--site-muted);margin-top:14px}
.album-story{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);align-items:start;gap:64px;padding:8px 0 80px}
.album-words blockquote{margin:18px 0 32px;padding:0;border:0;font-family:'Zen Maru Gothic',sans-serif;font-size:clamp(22px,2.5vw,30px);font-weight:700;line-height:1.85}
.album-words blockquote p{margin:0}
.album-story .about-intro{font-size:16px;line-height:2}.album-story .about-intro p+p{margin-top:12px}
.album-comment{max-width:360px;justify-self:center;padding:12px;background:#fff;border:1px solid var(--site-border);border-radius:8px}
.album-comment img{border-radius:3px}
.notebook-album-heading{display:flex;align-items:center;gap:20px}
.notebook-album-heading>div{min-width:0;flex:1}
.notebook-album-heading h2{font-size:26px;line-height:1.5}
.album-drawing{width:76px;flex-shrink:0;transform:rotate(3deg)}
@media(max-width:1000px){.album-story{gap:32px}.notebook-album-heading{justify-content:space-between;max-width:440px}}
@media(max-width:600px){.about-hero-album{grid-template-columns:1fr;gap:24px;padding-bottom:40px}.album-dream{width:100%;max-width:400px;box-sizing:border-box;justify-self:center;padding:22px 18px 16px;transform:none}.album-story{grid-template-columns:1fr;gap:28px;padding-bottom:48px}.album-comment{width:100%;max-width:320px;box-sizing:border-box}.album-words blockquote{font-size:23px;margin-top:12px}.album-drawing{width:64px}.notebook-album-heading h2{font-size:24px}}

/* 発明のめぐり: steps drawn as blocks with a raised tab (凸). */
.about-cycle{padding:72px 0 8px}
.about-cycle h2{margin:8px 0 0}
.about-cycle ol{list-style:none;padding:0;margin:44px 0 0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:16px}
.about-cycle li{position:relative;padding:34px 22px 24px;background:#fff;border:2px solid var(--cycle-color,#2E9D5B);border-radius:18px}
.about-cycle li:nth-child(1){--cycle-color:#E0533D}.about-cycle li:nth-child(2){--cycle-color:#C98A12}.about-cycle li:nth-child(3){--cycle-color:#2E9D5B}.about-cycle li:nth-child(4){--cycle-color:#3A86D4}.about-cycle li:nth-child(5){--cycle-color:#2563EB;background:#EEF3FD}
.cycle-tab{position:absolute;left:20px;top:-16px;display:grid;place-items:center;width:44px;height:28px;border-radius:9px 9px 0 0;background:var(--cycle-color);color:#fff;font-weight:700}
.about-cycle h3{font-size:20px;margin:0 0 10px}
.about-cycle p{margin:0;font-size:15px;line-height:1.85;color:var(--site-muted)}
.about-cycle li:nth-child(5) p::after{content:" → 1へ";color:#1D4ED8;font-weight:700}
.cycle-closing{margin:36px 0 0!important;font-family:'Zen Maru Gothic',sans-serif;font-weight:700;font-size:22px!important;color:var(--site-ink)!important;text-align:center}
.request-note{margin-top:12px!important;font-size:14px}
@media(max-width:1000px){.about-cycle ol{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:32px}}
@media(max-width:600px){.about-cycle{padding-top:48px}.about-cycle ol{grid-template-columns:1fr;row-gap:28px}.cycle-closing{font-size:19px!important}}
.about-cycle .notebook-album-heading{max-width:560px}

/* 発明ノート: shelves of things made (prints as thumbnails, tools as blocks). */
.about-notebook{display:block;padding:72px 0 64px}
.about-notebook>.notebook-album-heading{max-width:640px;margin-bottom:40px}
.notebook-intro{margin:10px 0 0;color:var(--site-muted)}
.shelf{margin-top:44px}
.shelf-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 16px;margin-bottom:18px}
.shelf-head h3{font-size:22px;margin:0}
.shelf-count{color:var(--site-muted);font-size:15px}.shelf-count strong{font-family:'Zen Maru Gothic',sans-serif;font-size:30px;color:var(--site-ink);margin-right:2px}
.shelf-head p{margin:0;flex-basis:100%;font-size:15px;color:var(--site-muted)}
.shelf-tiles{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(128px,1fr));gap:20px 16px}
.shelf-screen .shelf-tiles,.shelf-tiles:has(.tile-block){grid-template-columns:repeat(auto-fill,minmax(200px,1fr))}
.shelf-tile{display:flex;flex-direction:column;gap:10px;text-decoration:none!important;color:var(--site-ink)!important}
.tile-thumb{display:block;aspect-ratio:3/4;background:#fff;border:1px solid var(--site-border);border-radius:10px;overflow:hidden;box-shadow:0 4px 12px #443b2910;transition:transform .2s ease-out}
.tile-thumb img{display:block;width:100%;height:100%;object-fit:cover;object-position:top}
.shelf-tile:hover .tile-thumb,.shelf-tile:hover .tile-block-face{transform:translateY(-4px)}
.tile-title{font-size:14px;font-weight:700;line-height:1.5;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.tile-block-face{position:relative;display:flex;align-items:flex-end;min-height:96px;margin-top:14px;padding:16px 18px;border-radius:14px;background:var(--block);transition:transform .2s ease-out}
.tile-block-face .tile-title{color:#fff;font-size:17px;font-family:'Zen Maru Gothic',sans-serif}
.tile-block-tab{position:absolute;left:18px;top:-12px;width:40px;height:14px;border-radius:7px 7px 0 0;background:var(--block)}
.tile-sub{font-size:13px;line-height:1.7;color:var(--site-muted);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.shelf-more{display:inline-flex;align-items:center;min-height:44px;margin-top:12px;font-weight:700}
@media(max-width:600px){.about-notebook{padding:48px 0 40px}.shelf-tiles{grid-template-columns:repeat(3,minmax(0,1fr));gap:14px 10px}.shelf-screen .shelf-tiles,.shelf-tiles:has(.tile-block){grid-template-columns:1fr 1fr}.tile-title{font-size:12px}.tile-block-face .tile-title{font-size:15px}.shelf-count strong{font-size:26px}}

/* Quieter: color only on the small tabs; faces and borders stay neutral. */
.tile-block-face{background:#fff;border:1px solid var(--site-border);min-height:72px;padding:14px 16px}
.tile-block-face .tile-title{color:var(--site-ink);font-size:16px}
.tile-block-tab{top:-9px;height:10px;width:36px}
.about-cycle li{border:1px solid var(--site-border)}
.about-cycle li:nth-child(5){background:#fff}
.cycle-tab{height:24px;top:-13px}
@media(min-width:601px){.shelf-tiles:not(:has(.tile-block)){grid-template-columns:repeat(6,minmax(0,1fr))}}