/* Noir atelier — この黒案だけの、線と光の作法。 */
.black{--night:#10120f;--warm:#d6b780;--ink-line:#a99a7a;background:var(--night)}
.black .noir-icon{display:block;width:24px;height:24px;flex:0 0 24px;stroke:currentColor}
.black a{transition:color .2s,background-color .2s,border-color .2s}
.black a:focus-visible,.black button:focus-visible{outline:2px solid #f3cf86;outline-offset:6px}
:root:not(.zoomed) .black .masthead{height:76px;padding:0 4.2%;gap:24px}
:root:not(.zoomed) .black .identity img{width:44px;height:44px}
:root:not(.zoomed) .black .identity .office-title{font-size:.625rem;margin-bottom:3px}
:root:not(.zoomed) .black .identity b{font-size:1.625rem;line-height:1.1}
:root:not(.zoomed) .black .identity small{font-size:.575rem;margin-top:5px}
:root:not(.zoomed) .black .name-lockup{width:174px}
:root:not(.zoomed) .black .masthead nav{font-size:1rem;gap:28px}
:root:not(.zoomed) .black .masthead nav a{position:relative}
:root:not(.zoomed) .black .masthead nav a:after{content:'';position:absolute;left:0;right:0;bottom:9px;height:1px;background:var(--warm);transform:scaleX(0);transform-origin:left;transition:transform .3s}
:root:not(.zoomed) .black .masthead nav a:hover:after{transform:scaleX(1)}
:root:not(.zoomed) .black .menu-button{width:46px;height:46px;flex-basis:46px;border-color:#e9dcc080;transition:background .25s,transform .3s}
:root:not(.zoomed) .black .menu-button:hover{background:#d6b78019;transform:rotate(90deg)}
:root:not(.zoomed):not(.large-text) .black :is(.masthead,.site-header){transition:inset .32s ease,height .32s ease,padding .32s ease,border-radius .32s ease,background .32s ease,box-shadow .32s ease}
:root:not(.zoomed):not(.large-text) .black.has-scrolled :is(.masthead,.site-header){position:fixed;inset:12px max(20px,calc((100% - 880px)/2)) auto;min-height:0;height:54px;width:auto;margin:0;padding:4px 8px 4px 16px;gap:14px;border:1px solid #d6b78045;border-radius:18px;background:rgba(20,24,19,.76);color:#f5f0e6;backdrop-filter:blur(16px) saturate(115%);-webkit-backdrop-filter:blur(16px) saturate(115%);box-shadow:0 8px 30px #0003,0 1px 0 #e9dcc015}
:root:not(.zoomed):not(.large-text) .black.has-scrolled :is(.masthead,.site-header) :is(nav,.office-title,.identity small,.identity em,.noir-brand-office,.noir-brand-en){display:none}
:root:not(.zoomed):not(.large-text) .black.has-scrolled :is(.identity,.brand){gap:10px;min-height:44px}
:root:not(.zoomed):not(.large-text) .black.has-scrolled :is(.identity,.brand)>img{width:32px;height:32px;flex:0 0 32px}
:root:not(.zoomed):not(.large-text) .black.has-scrolled :is(.name-lockup,.brand-name){width:auto;flex:0 1 auto}
:root:not(.zoomed):not(.large-text) .black.has-scrolled :is(.identity b,.noir-brand-jp){font-size:1.375rem;line-height:1.25;gap:.12em;letter-spacing:0;white-space:nowrap}
:root:not(.zoomed):not(.large-text) .black.has-scrolled :is(.menu-button,.menu-open){width:44px;height:44px;min-height:44px;flex:0 0 44px;padding:12px;margin-left:auto;background:transparent;backdrop-filter:none}
@media(max-width:600px){:root:not(.zoomed):not(.large-text) .black.has-scrolled :is(.masthead,.site-header){inset:10px 12px auto;height:52px;padding:3px 5px 3px 12px;gap:10px;border-radius:16px}}
.black .noir-cover{min-height:540px}
.black .noir-portrait img{top:max(86px,calc((100svh - 60vw)/2));width:min(90%,calc(150svh - 129px));filter:brightness(1.06) saturate(.94)}
.black .noir-portrait:after{background:linear-gradient(90deg,#10120f 0%,#10120feb 16%,#10120f75 34%,transparent 57%),linear-gradient(0deg,#10120f 0%,#10120f6b 10%,transparent 32%),linear-gradient(180deg,#10120f90,transparent 23%)}
.black h1.noir-title{top:18%;gap:27px}
.black .noir-action{font-size:clamp(5rem,9.7vw,9rem)}
.black .noir-orbit{position:absolute;left:-6%;bottom:-10%;width:48%;height:auto;fill:none;stroke:#8f7951;stroke-width:.75;opacity:.34;z-index:-1;pointer-events:none}
.black .noir-caption a{gap:12px;border-bottom:1px solid #d6b7806e;transition:gap .25s}
.black .noir-caption a:hover{gap:22px}
.black .noir-caption a .noir-icon{width:19px;height:19px;transform:rotate(90deg)}
.black .noir-pha{transition:transform .45s cubic-bezier(.2,.8,.2,1);filter:drop-shadow(0 0 18px #dbd24513)}
.black .noir-pha:hover{transform:rotate(20deg) scale(1.08)}
.black .noir-reading-progress{position:fixed;inset:0 0 auto;height:2px;z-index:20;background:var(--warm);transform-origin:left;transform:scaleX(var(--noir-progress));pointer-events:none}
.black .noir-cover+.place-mark{padding:28px 0 0;position:relative;z-index:1;color:var(--warm)}
.black .noir-landscape-band{height:210px;overflow:hidden;max-width:1300px;margin:-26px auto 0;color:#93856b;pointer-events:none}
.black .noir-landscape{width:100%;height:100%}
.black .noir-chapters{display:flex;justify-content:center;gap:12px;max-width:900px;margin:0 auto 28px;padding:0 24px}
.black .noir-chapters a{display:flex;align-items:center;gap:12px;font-size:1rem;min-height:52px;padding:12px 24px;border:1px solid #bba1794f;border-radius:100px;color:#ded7c9}
.black .noir-chapters a:hover,.black .noir-chapters a[aria-current]{border-color:var(--warm);background:#d6b78016;color:#f5e1b8}
.black .noir-chapters .noir-icon{width:20px;height:20px;flex-basis:20px;color:var(--warm)}
.black .action-films{padding:96px 0 104px;background:#10120f;overflow:hidden}
.black .films-heading{margin:0 7% 48px}
.black .section-kicker{font-size:.85rem;letter-spacing:.18em;color:#d6b780}
.black .films-heading h2{font-size:clamp(2rem,3.6vw,3.6rem);line-height:1.55;margin-top:20px;letter-spacing:.045em}
.black .films-heading p{line-height:1.9;font-size:1.125rem;color:#c9c5bc}
.black .film-track{gap:30px;padding:10px 7% 20px;scrollbar-width:none}
.black .film-track::-webkit-scrollbar{display:none}
.black .film-card{flex-basis:30%;max-width:430px}
.black .film-poster{aspect-ratio:4/5;background:linear-gradient(145deg,#272921,#191c17 75%);border:1px solid #a99a7a5c;box-shadow:none;border-radius:3px 3px 30px 3px;transition:border-color .3s,background .3s,transform .4s}
.black .film-poster:before{content:'';position:absolute;inset:12px;border:1px solid #d6b78019;border-radius:2px 2px 20px 2px;pointer-events:none}
.black .film-poster:after{background:none}
.black .film-card:nth-child(3n+2) .film-poster{background:linear-gradient(135deg,#252a29,#171c19)}
.black .film-card:nth-child(3n+3) .film-poster{background:linear-gradient(135deg,#302924,#1d1916)}
.black .film-card.is-current .film-poster{outline:0;border-color:#dfc590;box-shadow:0 0 0 1px #dfc59030}
.black .film-card:hover .film-poster{border-color:#efd4a0;transform:translateY(-5px)}
.black .noir-illustration{display:block;width:100%;height:auto;fill:none;color:#c8ae7f;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.black .film-poster .noir-illustration{position:absolute;inset:24px 6% auto;width:88%;height:49%;opacity:.94;transition:transform .6s}
.black .film-card:hover .noir-illustration{transform:translateY(-5px)}
.black .film-number{position:absolute;left:28px;top:23px;font-family:Georgia,serif;font-size:1.25rem;font-style:italic;width:auto;height:auto;border:0;color:#d8c197;background:none;z-index:2}
.black .film-poster h3{left:28px;right:20px;top:auto;bottom:65px;font-size:clamp(1.25rem,1.65vw,1.625rem);font-family:'Hiragino Mincho ProN','Yu Mincho',serif;font-weight:400;line-height:1.8;text-shadow:none;color:#f2eadb}
.black .film-poster h3 span{display:block}
.black .film-badge{left:28px;bottom:24px;font-size:.875rem;background:none;border:0;padding:0;color:#bcb8aa}
.black .film-card-title{font-size:1rem;line-height:1.75;margin-top:20px;color:#c9c5ba}
.black .film-controls{margin:28px 7% 0;align-items:center}
.black .film-navigation{gap:24px}
.black .film-navigation button{width:52px;height:52px;border-radius:50%;background:none;border:1px solid #bba17970;font-size:1.5rem;transition:background .2s,transform .2s}
.black .film-navigation button:hover{background:#d6b78024;transform:scale(1.06)}
.black .film-navigation output{font-size:1rem;letter-spacing:.12em;min-width:72px}
.black .film-hint{font-size:1rem;color:#bfb7a9}
.black .film-description{margin:48px 7% 0;padding:36px 0 0;border-color:#bba17950;grid-template-columns:150px 1fr;gap:30px}
.black .film-description h3{font-size:1.5rem;font-weight:500}
.black .film-description p{max-width:42em;font-size:1.25rem;line-height:1.9;margin-top:16px}
.black .film-description a{display:inline-flex;align-items:center;gap:25px;margin-top:20px;font-size:1.125rem}
.black .film-production-note{margin:35px 7% 0;max-width:900px;color:#bbb7ac;font-size:1rem;line-height:1.9}
.black .questions{position:relative;padding:88px 7% 96px;grid-template-columns:minmax(0,.72fr) minmax(0,1.28fr);gap:7%;background:#181d17;border-top:1px solid #bcaa852a;border-bottom:1px solid #bcaa852a}
.black .questions-heading h2{font-size:clamp(2rem,3.1vw,3.1rem);line-height:1.5;margin-top:18px}
.black .noir-question-art{position:relative;height:130px;width:170px;color:#c5ac7f;margin-bottom:32px}
.black .noir-question-art>svg:not(.noir-icon){width:100%;height:100%;stroke:currentColor;stroke-width:1.3;fill:none}
.black .noir-question-art>.noir-icon{position:absolute;left:61px;top:42px;width:45px;height:45px;stroke-width:1}
.black .faq-draft-note{max-width:330px;border:0;padding:0;font-size:1rem;line-height:1.9}
.black .faq-item,.black .faq-item:last-child{border-color:#b8ab903f}
.black .faq-item summary{padding:29px 0;gap:20px;grid-template-columns:28px 1fr 24px}
.black .faq-item h3{font-weight:500;font-size:1.1875rem;line-height:1.8}
.black .faq-number{font-family:Georgia,serif;font-style:italic;font-size:1.125rem}
.black .faq-item[open]{border-color:#d6b7808c}
.black .faq-answer{padding-left:48px;padding-bottom:28px}
.black .faq-answer p{font-size:1.125rem;line-height:1.9}
.black .black-tail-wrap{padding:108px 7% 96px;max-width:1600px;background:#10120f}
.black .tail-profile{grid-template-columns:1.15fr .85fr;gap:8%;padding-bottom:96px}
.black .tail-profile figure{aspect-ratio:4/5;border-radius:3px 3px 90px 3px;overflow:hidden}
.black .tail-profile img{object-position:43% center;filter:saturate(.78);transition:transform 1.1s cubic-bezier(.2,.7,.2,1)}
.black .tail-profile figure:hover img{transform:scale(1.035)}
.black .tail-profile h2{font-size:clamp(2rem,3.3vw,3.2rem);line-height:1.55}
.black .noir-person-heading{display:grid;grid-template-columns:minmax(0,1fr) 144px;align-items:center;gap:20px;margin:16px 0 26px}
.black .noir-person-heading h2{margin:0}
.black .noir-person-heading h2>span{display:block;font-size:.55em;letter-spacing:.12em;margin-top:8px}
.black .tail-profile img.noir-character{width:144px;height:auto;object-fit:contain;filter:none;mask-image:linear-gradient(#000 85%,transparent);-webkit-mask-image:linear-gradient(#000 85%,transparent);transform-origin:50% 90%;transition:transform .5s ease}
.black .noir-person-heading:hover .noir-character{transform:rotate(-2deg) translateY(-3px)}
@media(max-width:1000px){.black .noir-person-heading{grid-template-columns:minmax(0,1fr) 108px;gap:18px}.black .tail-profile img.noir-character{width:108px}}
.zoomed .black .noir-person-heading,html.large-text .black .noir-person-heading{grid-template-columns:1fr;gap:20px}
.black .tail-profile p{font-size:1.25rem;line-height:1.9}
.black .noir-hobbies{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.black .noir-hobbies a{display:flex;align-items:center;gap:10px;border:1px solid #bba17950;border-radius:100px;padding:9px 18px;min-height:44px;font-size:1rem;color:#e2cba4}
.black .noir-hobbies a:hover{background:#d6b78017;border-color:#d6b780}
.black .tail-link{font-size:1.125rem;gap:26px;margin-top:32px;border-color:#bba17980}
.black .tail-activities{padding:86px 0}
.black .tail-records{border-top:0;position:relative}
.black .tail-records:before{content:'';position:absolute;top:36px;bottom:36px;left:3px;width:1px;background:linear-gradient(#d6b780,#d6b78020)}
.black .tail-record{position:relative;padding:30px 4px 30px 28px;grid-template-columns:140px 1fr 28px;gap:28px;transition:background .3s}
.black .tail-record:before{content:'';position:absolute;width:7px;height:7px;border-radius:50%;top:40px;left:0;background:#d6b780;box-shadow:0 0 0 5px #10120f}
.black .tail-record:hover{background:#d6b78009}
.black .tail-record:hover .tail-arrow{transform:translate(3px,-3px)}
.black .tail-arrow{transition:transform .25s}
.black .tail-record h3{font-size:1.25rem}
.black .tail-record p{font-size:1.125rem;line-height:1.9}
.black .tail-record time{font-size:1rem;letter-spacing:.04em}
.black .tail-links{padding-top:86px}
.black .tail-links h2{font-size:clamp(2rem,3.4vw,3.4rem)}
.black .tail-link-grid{gap:22px;border:0;margin-top:40px}
.black .tail-link-card{padding:30px;min-height:260px;background:#1b2019;border:1px solid #bba17945;border-radius:3px 3px 28px 3px;transition:transform .3s,border-color .3s,background .3s}
.black .tail-link-card+.tail-link-card{border:1px solid #bba17945}
.black .tail-link-card>.noir-icon{width:50px;height:50px;stroke-width:1.1;margin-bottom:30px;color:#d6b780}
.black .tail-link-card span{font-size:.875rem;letter-spacing:.18em}
.black .tail-link-card h3{font-size:1.5rem;margin-top:8px}
.black .tail-link-card p{font-size:1rem;color:#d0c9bb}
.black .tail-link-card:hover{transform:translateY(-5px);background:#252a20;border-color:#d6b780}
.black .tail-link-card:last-child{background:#e4d6b7;color:#252920;border-color:#e4d6b7}
.black .tail-link-card:last-child :is(p,span,b,.noir-icon){color:#464736}
.black .tail-link-card:last-child:hover{background:#f2e5c8}
.black footer{display:grid;grid-template-columns:1fr 1fr;gap:52px;padding:60px 7% 22px;background:#0b0e0a}
.black footer .noir-footer-brand{grid-column:1/-1;max-width:1240px;margin:30px auto 0;width:100%;padding:16px 0 8px;text-align:center}
.black footer .noir-footer-seal{display:flex;align-items:center;justify-content:center;gap:36px;width:min(100%,640px);margin:0 auto}
.black footer .noir-footer-seal:before,.black footer .noir-footer-seal:after{content:'';height:1px;flex:1;background:linear-gradient(90deg,transparent,#b49b635e)}
.black footer .noir-footer-seal:after{transform:scaleX(-1)}
.black footer .noir-footer-emblem{display:block;flex:0 0 auto;position:relative;padding:0;border:0;border-radius:50%;text-decoration:none;transition:transform .4s}
.black footer .noir-footer-emblem:before{content:'';position:absolute;inset:-9px;border:1px solid #b49b6359;border-radius:50%;transition:border-color .3s}
.black footer .noir-footer-emblem img{width:96px;height:96px;max-width:none;border-radius:50%;background:#f4f0e7}
.black footer .noir-footer-emblem:hover{transform:translateY(-3px)}
.black footer .noir-footer-emblem:hover:before{border-color:#e8cc8d}
.black footer .noir-footer-brand .noir-footer-motto{font-family:'Hiragino Mincho ProN','Yu Mincho',serif;font-size:1.125rem;font-weight:400;letter-spacing:.16em;line-height:1.7;margin:30px 0 0;color:#ded2b7;text-align:center;text-align-last:center}
.black footer .noir-footer-brand .noir-footer-word{white-space:nowrap;font-size:clamp(2rem,7.3vw,5rem);font-weight:500;letter-spacing:.015em;line-height:1.1;margin-top:22px;color:#92957d;text-align:center;text-align-last:center;font-family:'Helvetica Neue',Arial,sans-serif;overflow:hidden}
.black footer .noir-footer-i{position:relative;display:inline-block;font:inherit;letter-spacing:inherit;color:inherit}
.black footer .noir-footer-i:after{content:"i";position:absolute;inset:0;color:#ffe39a;clip-path:inset(0 0 66% 0);pointer-events:none}
.black .noir-menu{position:fixed;inset:16px 16px 16px auto;margin:0;width:510px;max-width:calc(100% - 32px);height:calc(100svh - 32px);max-height:none;padding:24px 34px 32px;border:1px solid #c1aa7d5e;border-radius:26px;background:#171d17ed;color:#f3eedf;backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);box-shadow:-30px 0 100px #0007}
.black .noir-menu::backdrop{background:#05090570;backdrop-filter:blur(8px)}
.black .noir-menu-heading{display:grid;grid-template-columns:minmax(0,1fr) 44px;align-items:center;gap:12px}
.black .noir-menu .close{position:static;border:0;color:inherit;cursor:pointer;display:grid;place-items:center;background:none;padding:0;width:44px;min-height:44px}
.black .noir-menu-label{font-family:'Hiragino Mincho ProN',serif;font-size:2rem;line-height:1.5;margin:0;color:#f3e2c0;text-align:left;text-align-last:left}
.black .noir-menu-role{display:block;font-family:'Helvetica Neue',Arial,'Hiragino Sans','Hiragino Kaku Gothic ProN',sans-serif;font-size:.875rem;line-height:1.6;letter-spacing:.08em;margin-bottom:8px;color:#d9ccaf}
.black .noir-menu nav a{line-height:1.75}
.black .noir-menu nav{display:grid;margin-top:16px;gap:0}
.black .noir-menu nav a{display:flex;gap:16px;align-items:center;padding:14px 2px;min-height:54px;font-size:1.125rem;font-weight:400;text-decoration:none;border-bottom:1px solid #c1aa7d30}
.black .noir-menu nav a>.noir-icon:first-child{color:#c9ad79;width:21px;height:21px;flex-basis:21px}
.black .noir-menu nav a>.noir-icon:last-child{margin-left:auto;width:18px;height:18px;flex-basis:18px}
.black .noir-menu nav a:hover{color:#f1d18c;background:#d6b7800a}
.black .noir-settings{display:flex;justify-content:flex-end;margin-top:12px;padding:0;font-size:1rem}
.black .noir-font-tools{display:flex;align-items:center;justify-content:space-between;gap:14px}
.black .noir-font-tools>span{font-size:.9375rem;line-height:1.6}
.black .noir-font-tools output{display:block;color:inherit;font-size:.875rem;line-height:1}
.black .noir-font-tools>div{display:flex;gap:2px;border:1px solid #bba17950;border-radius:6px;overflow:hidden}
.black .noir-font-tools button{font-size:1rem;width:max(44px,2em);min-height:44px;background:transparent;border:0;color:#f3eedf}
.black .noir-font-tools [data-noir-font="reset"]{width:max(56px,3em)}
.black .noir-font-tools button:focus-visible{outline:2px solid #f1d18c;outline-offset:-3px}
.black .noir-font-tools button:hover{background:#d6b78024}
.black .noir-font-tools button:disabled{opacity:.35;cursor:default}
.black .noir-motion-button{display:block;padding:10px 0;min-height:44px;color:#ded6c6;background:none;border:0;font-size:.9375rem;text-decoration:underline;text-underline-offset:5px;margin-top:12px}
.black .noir-compare{display:flex;align-items:center;gap:12px;min-height:44px;margin-top:24px;font-size:1rem;color:#d6b780}
/* 線画は静止画でも読める。JSが働いた時だけ描画を追加する。 */
.black .noir-draw :is(path,line,polyline,polygon,circle,ellipse){stroke-dasharray:1;stroke-dashoffset:0}
.black.noir-experience-ready .noir-draw:not(.is-drawn) :is(path,line,polyline,polygon,circle,ellipse){stroke-dashoffset:1}
.black.noir-experience-ready .noir-draw.is-drawn :is(path,line,polyline,polygon,circle,ellipse){animation:noir-ink 1.8s cubic-bezier(.3,.1,.2,1) both}
.black .noir-draw :nth-child(3n){animation-delay:.12s!important}
.black .noir-draw :nth-child(3n+1){animation-delay:.24s!important}
@keyframes noir-ink{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
.black.noir-motion-off *, .black.noir-motion-off *:before,.black.noir-motion-off *:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
.black.noir-motion-off .noir-draw *{stroke-dashoffset:0!important}
@media(max-width:1100px){
 .black .film-poster{aspect-ratio:auto;min-height:440px;padding:28px 24px 24px;display:flex;flex-direction:column}
 .black .film-poster .noir-illustration{position:relative;inset:auto;width:100%;height:155px;margin:18px 0 20px;flex-shrink:0}
 .black .film-poster h3{position:static;padding:0;font-size:1.25rem;line-height:1.8;margin:0 0 24px}
 .black .film-badge{position:static;margin-top:auto;display:block}

}
@media(max-width:1000px){
 .black .film-card{flex-basis:43%;max-width:370px}.black .film-poster h3{font-size:1.375rem}
 .black .questions{gap:5%;grid-template-columns:1fr 1.3fr}.black .tail-profile{gap:6%;grid-template-columns:1fr 1fr}
 .black .tail-record{grid-template-columns:115px 1fr 24px;gap:18px}.black .tail-link-grid{gap:14px}.black .tail-link-card{padding:24px}
}
@media(max-width:760px){
 .black .film-poster h3{font-size:1.25rem}
 .black .film-card{flex-basis:75%;max-width:340px}.black .films-heading{display:block;margin:0 24px 30px}.black .films-heading h2{font-size:2rem}.black .films-heading p{margin-top:20px}
 .black .action-films{padding:56px 0 64px}.black .film-track{gap:20px;padding-inline:24px}.black .film-controls{margin:24px 24px 0}.black .film-hint{font-size:.9375rem}.black .film-navigation{gap:12px}
 .black .film-navigation button{width:46px;height:46px}.black .film-description{display:block;margin:28px 24px 0;padding-top:28px}.black .film-description h3{margin-top:16px;font-size:1.375rem}.black .film-description p{font-size:1.125rem}.black .film-production-note{margin:28px 24px 0}
 .black .questions{display:block;padding:54px 24px 64px}.black .questions-heading{margin-bottom:34px}.black .noir-question-art{height:96px;width:126px;margin-bottom:26px}.black .noir-question-art>.noir-icon{left:44px;top:30px;width:33px;height:33px}.black .questions-heading h2{font-size:2rem}.black .faq-draft-note{max-width:none;margin-top:16px}.black .faq-item summary{padding:24px 0;gap:12px;grid-template-columns:24px 1fr 22px}.black .faq-item h3{font-size:1.125rem}.black .faq-answer{padding:0 0 24px}
 .black .black-tail-wrap{padding:64px 24px}.black .tail-profile{display:block;padding-bottom:58px}.black .tail-profile figure{aspect-ratio:4/3;border-radius:3px 3px 48px 3px;margin-bottom:32px}.black .tail-profile h2{font-size:2rem}.black .tail-profile p{font-size:1.125rem}.black .noir-hobbies{margin-top:24px}
 .black .tail-activities{padding:58px 0}.black .tail-record{grid-template-columns:1fr 24px;padding:24px 0 24px 24px;gap:10px}.black .tail-record time{grid-column:1}.black .tail-record>div{grid-column:1}.black .tail-record .tail-arrow{grid-column:2;grid-row:1/3}.black .tail-record:before{top:33px}.black .tail-record h3{font-size:1.1875rem}.black .tail-record p{font-size:1.125rem}
 .black .tail-links{padding-top:58px}.black .tail-link-grid{grid-template-columns:1fr;gap:16px;margin-top:30px}.black .tail-link-card{padding:25px 24px 25px 94px;min-height:160px}.black .tail-link-card>.noir-icon{position:absolute;left:24px;top:28px;width:44px;height:44px}.black .tail-link-card h3{font-size:1.5rem}.black .tail-link-card p{padding-right:14px}
 .black footer{display:block;padding:44px 24px 22px}.black footer .noir-footer-brand{margin-top:58px;padding-bottom:4px}.black footer .noir-footer-seal{gap:25px}.black footer .noir-footer-emblem img{width:76px;height:76px}.black footer .noir-footer-emblem:before{inset:-7px}.black footer .noir-footer-brand .noir-footer-motto{font-size:1rem;margin-top:26px}.black footer .noir-footer-brand .noir-footer-word{margin-top:20px;font-size:8.2vw}.black footer .review-note{margin-top:35px}
}
@media(max-width:600px){
 :root:not(.zoomed) .black .masthead{height:72px;padding:0 20px;gap:10px}
 :root:not(.zoomed) .black .identity{gap:9px}:root:not(.zoomed) .black .identity img{width:40px;height:40px;flex-basis:40px}
 :root:not(.zoomed) .black .identity b{font-size:1.5rem}:root:not(.zoomed) .black .name-lockup{width:145px;flex-basis:145px}
 :root:not(.zoomed) .black .identity .office-title{font-size:.625rem;margin-bottom:3px}:root:not(.zoomed) .black .identity small{font-size:.575rem;margin-top:4px}
 :root:not(.zoomed) .black .menu-button{width:44px;height:44px;flex-basis:44px}
 .black .noir-cover{min-height:500px}.black .noir-portrait img{top:clamp(108px,calc(38svh - 135px),190px);left:-47.5%;width:160%}
 .black .noir-portrait:after{background:linear-gradient(90deg,#10120f7a,transparent 44%),linear-gradient(0deg,#10120f 0%,#10120fe8 14%,transparent 34%),linear-gradient(180deg,#10120f 0%,#10120fb0 13%,transparent 26%)}
 .black h1.noir-title{top:108px;gap:14px}.black .noir-preface{font-size:1.0625rem}.black .noir-promise{font-size:2.125rem;padding-top:29px}
 .black .noir-action{font-size:5.3rem;bottom:88px}.black .noir-orbit{width:85%;left:-20%;bottom:8%;opacity:.25}
 .black .noir-caption{bottom:28px}.black .noir-caption p{font-size:1rem}.black .noir-pha{bottom:20px;right:18px;width:58px;height:58px}
 .black .noir-cover+.place-mark{padding-top:28px}.black .noir-landscape-band{height:130px;margin:0;width:100%}.black .noir-landscape-band svg{width:140%;max-width:none;margin-left:-20%}.black .noir-chapters{gap:8px;justify-content:space-between;padding:0 20px;margin-bottom:0}
 .black .noir-chapters a{display:flex;flex-direction:column;gap:9px;padding:16px 8px;flex:1;min-height:82px;border-radius:8px;font-size:.875rem}
 .black .noir-chapters .noir-icon{width:23px;height:23px}
 .black .noir-menu{inset:10px;max-width:calc(100% - 20px);width:auto;height:calc(100svh - 20px);padding:20px 22px 26px}.black .noir-menu nav a{font-size:1.0625rem;padding:12px 0}.black .noir-menu .close{right:20px}.black .noir-font-tools{gap:10px}
}
@media(max-width:360px){.black .noir-action{font-size:4.5rem}.black .noir-promise{font-size:1.9rem}.black .film-poster h3{font-size:1.25rem;left:24px;bottom:58px}.black .film-badge{left:24px;font-size:.8125rem}.black .film-controls{align-items:flex-start;gap:12px}.black .film-hint{max-width:90px}.black .film-navigation{gap:8px}}
@media(min-width:601px) and (max-height:720px){.black h1.noir-title{top:112px}.black .noir-action{left:26%;font-size:6rem}.black .noir-orbit{width:35%}}
@media(min-width:601px) and (max-height:500px){
 .black .noir-cover{height:100svh;min-height:360px}.black .noir-action{font-size:4rem;left:26%;bottom:70px}
 .black .noir-caption{left:26%;bottom:18px;gap:24px}.black .noir-caption p{font-size:1rem}.black .noir-caption a{font-size:1rem}
 .black .noir-pha{width:54px;height:54px;right:24px;bottom:18px}
}
.zoomed .black .noir-portrait img{top:0;width:100%;height:100%}.zoomed .black .noir-orbit{display:none}.zoomed .black .noir-action{font-size:min(3rem,23vw)}
.zoomed .black .noir-chapters{flex-wrap:wrap}.zoomed .black .noir-chapters a{flex:1 1 200px}.zoomed .black .film-poster{aspect-ratio:auto;min-height:430px;padding:0 22px 24px}
.zoomed .black .film-poster .noir-illustration{position:relative;inset:auto;width:100%;height:160px}.zoomed .black .film-poster h3{position:relative;inset:auto;padding:0;font-size:1.25rem;line-height:1.7}.zoomed .black .film-badge{position:static;display:block;font-size:.875rem;margin-top:20px}.zoomed .black .film-number{display:none}
.zoomed .black .questions,.zoomed .black .tail-profile{display:block}.zoomed .black .tail-link-grid{grid-template-columns:1fr}.zoomed .black .tail-link-card{padding:25px;min-height:0}.zoomed .black .tail-link-card>.noir-icon{position:static;margin-bottom:24px}
.zoomed .black .tail-record{grid-template-columns:1fr 24px}.zoomed .black .tail-record>div{grid-column:1}.zoomed .black .tail-record .tail-arrow{grid-row:1/3}.zoomed .black .noir-menu{padding:20px 20px 28px}.zoomed .black .noir-font-tools{flex-wrap:wrap}.zoomed .black .noir-menu nav a{font-size:1rem}
@media(prefers-reduced-motion:reduce){.black *,.black *:before,.black *:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}.black .noir-draw *{stroke-dashoffset:0!important}}

/* 広い画面も、写真・主見出し・添え文を一組として読む。 */
@media(min-width:761px){
 .black .noir-pha{width:clamp(96px,7.8vw,128px);height:clamp(96px,7.8vw,128px)}
 :root:not(.zoomed) .black .masthead nav{font-size:1.125rem}
 .black .noir-caption p{font-size:1.5rem;line-height:1.6}
 .black :is(.noir-chapters a,.film-card-title,.film-hint,.film-production-note,.faq-draft-note,.noir-hobbies a,.tail-link-card p,.noir-menu-role,.noir-font-tools>span,.noir-font-tools output,.noir-motion-button,.noir-compare){font-size:1.125rem}
 .black :is(.films-heading p,.faq-answer p,.tail-record p){font-size:1.25rem;max-width:40em}
 .black .tail-record time{font-size:1.125rem}
 .black .film-badge{font-size:1rem}
 .black .noir-person-heading{grid-template-columns:minmax(0,1fr) 112px;gap:24px}
 .black .tail-profile img.noir-character{width:112px}
 .black .tail-profile h2{font-size:clamp(2rem,3vw,2.625rem)}
 .black .tail-link-card{padding-bottom:52px}
}
@media(min-width:1001px) and (min-height:721px){
 .black .noir-preface{font-size:clamp(1.5rem,1.8vw,1.75rem)}
 .black .noir-promise{font-size:clamp(3rem,4.2vw,4rem)}
 .black .noir-action{font-size:clamp(6rem,8vw,7.5rem)}
}

/* 2026-10-06: 黒だけの刻印。輪郭ではなく金の部品が一度だけ動く。 */
.black .noir-mechanism{color:#d8b977;overflow:visible;pointer-events:none;flex:none;stroke-width:2;stroke-linecap:square;stroke-linejoin:miter}
.black .noir-mechanism .noir-metal{fill:currentColor;stroke:none;transform-box:fill-box;transform-origin:center}
.black .noir-mechanism .noir-cut{stroke:#f5e5bd;stroke-width:.65;opacity:.5}
.black .noir-mechanism .noir-plate{fill:#d8b97708;stroke:#d8b97740;stroke-width:.6}
.black .noir-heading-icon{display:block;width:56px;height:56px;margin:0 0 16px}
.black .noir-entrance-icon{display:inline-block;width:32px;height:32px;vertical-align:middle;margin:0 12px 3px 0}
.black .noir-mechanism.is-engaged .noir-slide{animation:noir-seat .85s cubic-bezier(.2,.7,.2,1) both}
.black .noir-mechanism.is-engaged .noir-counter{animation:noir-seat-back .85s .12s cubic-bezier(.2,.7,.2,1) both}
.black .noir-mechanism.is-engaged .noir-drop{animation:noir-drop .75s .08s cubic-bezier(.2,.7,.2,1) both}
.black .noir-mechanism.is-engaged .noir-lift{animation:noir-lift .95s cubic-bezier(.2,.7,.2,1) both}
.black .noir-mechanism.is-engaged .noir-lamp{animation:noir-light-on 1.1s .16s ease-out both}
.black .noir-mechanism:not(.is-in-view) *,.black.noir-page-hidden *{animation-play-state:paused!important}
.black.noir-motion-off .noir-mechanism .noir-metal{animation:none!important;transform:none!important}
.black .noir-draw:not(.is-in-view) *{animation-play-state:paused!important}
@keyframes noir-seat{from{transform:translateX(-7px);opacity:.4}to{transform:translateX(0);opacity:1}}
@keyframes noir-seat-back{from{transform:translateX(7px);opacity:.4}to{transform:translateX(0);opacity:1}}
@keyframes noir-light-on{0%{opacity:.35}50%{opacity:1}100%{opacity:1}}
@media(max-width:760px){.black .noir-heading-icon{width:44px;height:44px;margin-bottom:12px}.black .noir-entrance-icon{width:28px;height:28px;margin-right:9px}}
@media(prefers-reduced-motion:reduce){.black .noir-mechanism .noir-metal{animation:none!important;transform:none!important}}

@keyframes noir-drop{from{transform:translateY(-7px);opacity:.4}to{transform:translateY(0);opacity:1}}
@keyframes noir-lift{from{transform:translateY(7px);opacity:.4}to{transform:translateY(0);opacity:1}}
.black.noir-invitation-page .page-hero .noir-mechanism{color:#886725}
.black.noir-invitation-page .page-hero .noir-mechanism .noir-cut{stroke:#65502a}

/* 2026-10-07: 黒の表紙から、対話と人物の明るい面へ。 */
.black .questions{--section-ink:#292c27;--section-line:#8b78584d;background:#fffdf8;color:#292c27;border-color:#9b86613d}
.black .black-tail-wrap{max-width:none;background:#e3d5be;color:#292c27;padding-bottom:0}
.black :is(.questions,.black-tail-wrap) :is(.section-kicker,.noir-mechanism,.noir-hobbies a,.tail-link,.tail-record time,.tail-arrow,.faq-number){color:#755822}
.black :is(.questions,.black-tail-wrap) .noir-cut{stroke:#745c35;opacity:.65}
.black :is(.questions,.black-tail-wrap) :is(p,.faq-draft-note){color:#46483f}
.black :is(.questions,.black-tail-wrap) :is(.faq-item,.tail-profile,.tail-record,.tail-link,.noir-hobbies a){border-color:#8b78584d}
.black :is(.questions,.black-tail-wrap) a:focus-visible{outline-color:#755822}
.black .tail-activities{background:#e8e9e2;box-shadow:0 0 0 100vmax #e8e9e2;clip-path:inset(0 -100vmax)}
.black .tail-links{background:#fffdf8;box-shadow:0 0 0 100vmax #fffdf8;clip-path:inset(0 -100vmax)}
.black .tail-links{padding-bottom:96px}
.black .tail-record:before{background:#8a672f;box-shadow:0 0 0 5px #e8e9e2}
.black .tail-records:before{background:linear-gradient(#8a672f,#8a672f30)}
.black .tail-link-card,.black .tail-link-card+.tail-link-card{background:#fffdf8;color:#292c27;border-color:#8b78584d}
.black .tail-link-card :is(span,b,.noir-icon){color:#755822}
.black .tail-link-card:hover{background:#eee5d4;border-color:#8a672f}
.black .tail-link-card:last-child{background:#dfd0b3;color:#252920;border-color:#c9b995}
.black .tail-link-card:last-child:hover{background:#d6c5a4}
@media(max-width:760px){.black .tail-links{padding-bottom:64px}}
.black .action-films{--section-ink:#292c27;--section-line:#8b78584d;background:#f5f1e8;color:#292c27}
.black .action-films :is(.films-heading p,.film-card-title,.film-hint,.film-production-note){color:#515349}
.black .action-films :is(.section-kicker,.films-heading .noir-mechanism,.film-description a){color:#755822}
.black .films-heading .noir-cut{stroke:#745c35}
.black .action-films :is(.film-navigation button,.film-description){border-color:#8b785870}
.black .action-films :is(a,button):focus-visible{outline-color:#755822}
/* 明るい面の開閉・選択・本文にも、実効色を明示する。 */
.black .questions .questions-heading>p:first-of-type{color:#46483f}
.black .questions .faq-item summary,.black .action-films .film-description h3{color:#292c27}
.black .questions .faq-answer,.black .action-films .film-description p{color:#46483f}
.black .questions .faq-answer a,.black .action-films .film-navigation output{color:#755822}
.black .questions .faq-plus:before,.black .questions .faq-plus:after{background:#755822}
.black .questions .faq-item summary:hover{color:#624719;background:#75582208}
.black .questions .faq-item summary:focus-visible{outline-color:#755822}
.black .questions .faq-answer a:hover,.black .action-films .film-description a:hover{color:#624719}
.black .action-films .film-navigation button{color:#292c27;border-color:#8b7858}
.black .action-films .film-navigation button:hover{color:#292c27;background:#e4d9c4;border-color:#755822}
.black .questions .faq-item[open]{border-color:#8b7858}
/* Outfit本来の丸点と軸を使う。点の位置・輪郭は加工せず、塗色だけ分ける。 */
@font-face{font-family:'Noir Outfit';src:url('/facades/assets/black-outfit.ttf') format('truetype');font-weight:100 900;font-style:normal;font-display:swap}
.black .identity small,.black.black-document .noir-brand-en,.black footer .noir-footer-brand .noir-footer-word{font-family:'Noir Outfit',sans-serif;font-weight:400;line-height:1.1}
.black .identity .lit-i{font-family:inherit;font-weight:inherit}
.black :is(.lit-i,.noir-footer-i,.noir-brand-en>span:nth-child(2),.noir-brand-en>span:nth-child(5),.noir-brand-en>span:nth-child(8)){background:linear-gradient(to bottom,#ffe39a 0 34%,currentColor 34% 100%);background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.black :is(.lit-i,.noir-footer-i,.noir-brand-en>span:nth-child(2),.noir-brand-en>span:nth-child(5),.noir-brand-en>span:nth-child(8)):before,.black :is(.lit-i,.noir-footer-i,.noir-brand-en>span:nth-child(2),.noir-brand-en>span:nth-child(5),.noir-brand-en>span:nth-child(8)):after{content:none}
