/* DEAR AI v5.3 final（2026-11-09）：v5.3 candidate に、Safari でも同じになる語の切れ目の改行と、SP 詳細欄の項目間の余白 */
*{box-sizing:border-box}
:root{--c:37,37,37;--g:1.46vw;--l:17.2vw}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:#fff;color:rgba(var(--c),1);font-family:YakuHanJP,"neue-haas-grotesk-display","Noto Sans JP",sans-serif;font-weight:500;font-size:12px;line-height:1.9;letter-spacing:.04em;font-kerning:normal;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased}
h1,h2,h3{font-size:100%;font-weight:500;margin:0;font-feature-settings:"palt"}
p,figure{margin:0}
a{color:inherit;text-decoration:none}
a:hover{text-decoration:underline}
a:focus-visible,summary:focus-visible{outline:1px solid rgba(var(--c),1);outline-offset:2px}
img{display:block;width:100%;height:auto;background:#f4f4f4}
.skip{position:absolute;left:16px;top:-40px;background:#fff;padding:8px 12px}
.skip:focus{top:16px;z-index:10}
.sub{color:rgba(var(--c),.6)}
/* ナビ */
.nav{position:sticky;top:0;z-index:5;display:flex;justify-content:space-between;align-items:flex-start;padding:var(--g) var(--g) .6em;background:rgba(255,255,255,.94);line-height:1.6;letter-spacing:.05em}
.nav .brand small{margin-left:1.2em;font-feature-settings:"palt";font-size:10px;letter-spacing:.07em;color:rgba(var(--c),.6)}
.nav ul{list-style:none;margin:0 -.05em 0 0;padding:0;display:flex;flex-wrap:wrap;justify-content:flex-end}
.nav li{margin-left:.55em}
.nav li a{white-space:nowrap}
.nav li a[aria-current]{text-decoration:underline}
.nav li:not(:last-child) a::after{content:","}
/* INDEX：表紙 */
.cover{padding:16vw var(--g) 9vw var(--l)}
.cover .k{margin-bottom:1.6vw;letter-spacing:.08em;color:rgba(var(--c),.6)}
.cover h1{font-size:5.3vw;line-height:1.16;letter-spacing:.03em}
.cover p.s{margin-top:2.2vw;font-size:1.25vw;line-height:1.75;letter-spacing:.06em}
/* INDEX：扉絵 */
.plates{display:grid;grid-template-columns:repeat(12,1fr);column-gap:var(--g);padding:0 var(--g)}
.plate{position:relative;display:block}
.plate:hover{text-decoration:none}
.plate:hover .pn{text-decoration:underline}
.plate figure{overflow:hidden}
.plate figure img{transition:transform 1.2s cubic-bezier(.2,.6,.2,1)}
.plate:hover figure img{transform:scale(1.015)}
.plate .cap{display:block;margin-top:1.1em}
.plate .num{display:block;letter-spacing:.08em;color:rgba(var(--c),.6)}
.plate .dom{display:block;font-size:2.36vw;line-height:1.34;letter-spacing:.05em;font-feature-settings:"palt"}
.plate .pn{display:block;margin-top:.45em;letter-spacing:.07em}
.plate .ph{word-break:keep-all;overflow-wrap:anywhere;display:block;font-size:1.25vw;line-height:1.75;margin-top:.3em;letter-spacing:.06em}
.p1{grid-column:1/13;margin-bottom:12vw}
.p1 .cap{display:grid;grid-template-columns:var(--l) 1fr;padding-left:0}
.p1 .cap .num{grid-row:1/4}
.p1 .cap>:not(.num){grid-column:2}
.p2{grid-column:6/13;margin-bottom:14vw}
.p2 .cap{width:70%}
.p3{grid-column:2/6;margin-bottom:16vw;margin-top:-4vw}
.p4{grid-column:4/12;margin-bottom:12vw}
.p5{grid-column:1/13;margin:0 calc(var(--g)*-1) 13vw}
.p5 .cap{padding-left:var(--l)}
.p6{grid-column:1/9;margin-bottom:9vw}
.p6 .cap{padding-left:var(--l)}
/* INDEX：目録 */
.index{padding:2vw var(--g) 4vw}
.index h2{display:flex;justify-content:space-between;padding:0 0 1.6vw var(--l);border-bottom:1px solid rgba(var(--c),.15);margin-bottom:2.4vw;font-size:1.38vw;line-height:1.5;letter-spacing:.05em}
.index h2 small{font-size:12px;letter-spacing:.06em;color:rgba(var(--c),.6)}
.cat{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(6,1fr);gap:2.6vw var(--g)}
.cat a{display:block}
.cat .th{aspect-ratio:3/2;overflow:hidden;background:#f4f4f4;margin-bottom:.6em}
.cat .th img{width:100%;height:100%;object-fit:cover}
.cat .n{display:block;letter-spacing:.07em;color:rgba(var(--c),.6)}
.cat .t{display:block;line-height:1.6;letter-spacing:.05em}
.about{word-break:keep-all;overflow-wrap:anywhere;padding:6vw var(--g) 2vw var(--l);font-size:1.25vw;line-height:1.8;letter-spacing:.06em}
.about p+p{margin-top:.6em}
.about .links{margin-top:1.6em;font-size:12px;letter-spacing:.05em}
.about .links a{margin-right:1.6em;text-decoration:underline}
/* 領域ページ */
.head{padding:11vw var(--g) 3.4vw var(--l)}
.head .k{color:rgba(var(--c),.6);margin-bottom:1vw;letter-spacing:.08em}
.head h1{font-size:3.98vw;line-height:1.16;letter-spacing:.05em}
.head h1 small{display:block;font-size:12px;line-height:1.9;letter-spacing:.06em;font-feature-settings:normal;margin-top:1vw;color:rgba(var(--c),.6)}
.head .in{margin-top:1.6vw;max-width:46em;word-break:keep-all;overflow-wrap:anywhere;line-height:1.95;color:rgba(var(--c),.75)}
.works{padding:0 var(--g)}
.work{display:grid;grid-template-columns:repeat(12,1fr);column-gap:var(--g);margin-bottom:11vw;align-items:end}
.work .cap{grid-row:1}
.work h2{font-size:1.38vw;line-height:1.5;letter-spacing:.05em}
.work .ph{word-break:keep-all;overflow-wrap:anywhere;font-size:1.25vw;line-height:1.75;margin-top:.55em;letter-spacing:.06em}
.work .meta{color:rgba(var(--c),.6);margin-top:.7em;letter-spacing:.05em}
.work .role{margin-top:.2em}
.work .go{display:inline-block;margin-top:1em;text-decoration:underline}
.work details{grid-row:2;margin-top:2vw}
/* 先頭（扉絵と同じ作品）：横いっぱい */
.w0 figure{grid-column:1/13;grid-row:1}
.w0 .cap{grid-column:1/13;grid-row:2;display:grid;grid-template-columns:calc(var(--l) - var(--g)) 1fr;padding-top:1.4vw}
.w0 .cap .lead{grid-column:2}
.w0 h2{font-size:2.36vw;line-height:1.34;letter-spacing:.04em}
.w0 details{grid-column:4/12;grid-row:3}
/* 型 a：画像 右寄せ大、文字 左下 */
.wa figure{grid-column:5/13;grid-row:1}
.wa .cap{grid-column:2/5}
.wa details{grid-column:5/12}
/* 型 b：画像 左、文字 右下 */
.wb figure{grid-column:1/8;grid-row:1}
.wb .cap{grid-column:9/12}
.wb details{grid-column:2/8}
/* 型 c：画像 小さく中央寄り、余白を多く */
.wc figure{grid-column:6/11;grid-row:1}
.wc .cap{grid-column:2/6}
.wc details{grid-column:6/12}
/* 詳細欄 */
details{border-top:1px solid rgba(var(--c),.15);font-size:12px;line-height:1.95}
summary{cursor:pointer;padding:.75em 0;letter-spacing:.05em;color:rgba(var(--c),.75);list-style:none}
summary::-webkit-details-marker{display:none}
summary::before{content:"＋";display:inline-block;width:1.4em}
details[open] summary::before{content:"－"}
summary:hover{color:rgba(var(--c),1)}
details dl{margin:.2em 0 1.3em;display:grid;grid-template-columns:9em 1fr;gap:.5em 1.2em}
details dt{color:rgba(var(--c),.6)}
details dd{margin:0;word-break:keep-all;overflow-wrap:anywhere}
details dd a{text-decoration:underline}
details ul{margin:0;padding:0 0 0 1.1em}
details p.g{margin:1.1em 0 .4em;color:rgba(var(--c),.6);font-size:11px;letter-spacing:.07em}
details p.g:first-of-type{margin-top:.2em}
/* つながり */
.threads{padding:2vw var(--g) 6vw var(--l)}
.threads>h2,.doors>h2{font-size:1.38vw;line-height:1.5;letter-spacing:.05em;padding-bottom:1.2vw;border-bottom:1px solid rgba(var(--c),.15);margin-bottom:2.4vw}
.thread{display:grid;grid-template-columns:1fr 1.3fr;gap:var(--g);margin-bottom:4vw}
.thread h3{font-size:1.25vw;line-height:1.6;letter-spacing:.05em}
.thread p{word-break:keep-all;overflow-wrap:anywhere;margin-top:.7em;max-width:34em;line-height:1.95}
.thread ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:var(--g)}
.thread li a{display:block}
.thread li .th{aspect-ratio:3/2;overflow:hidden;margin-bottom:.5em}
.thread li .th img{width:100%;height:100%;object-fit:cover}
.thread li small{display:block;color:rgba(var(--c),.6)}
.tline{margin:-1.4vw 0 2.4vw}
.tline a{text-decoration:underline}
/* ほかの入口 */
.doors{padding:2vw var(--g) 4vw var(--l)}
.doors ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,1fr);gap:var(--g)}
.doors a{display:block}
.doors .th{aspect-ratio:3/2;overflow:hidden;margin-bottom:.6em}
.doors .th img{width:100%;height:100%;object-fit:cover}
.doors .n{color:rgba(var(--c),.6);margin-right:.6em;letter-spacing:.07em}
footer{padding:3vw var(--g) 4vw var(--l);color:rgba(var(--c),.6);line-height:1.95}
footer a{text-decoration:underline}
@media only screen and (max-width:767px){
 :root{--g:16px;--l:16px}
 .nav{padding:14px 16px 8px}
 .nav .brand small{display:block;margin:2px 0 0;letter-spacing:.02em;white-space:nowrap}
 .nav ul{max-width:62%}
 .nav{letter-spacing:.03em}
 .cover{padding:88px 16px 56px}
 .cover h1{font-size:32px;line-height:1.22}
 .cover p.s{font-size:13.5px;margin-top:18px}
 .plates{display:block;padding:0 16px}
 .plate .dom{font-size:21px}
 .plate .ph{font-size:13.5px}
 .p1{margin-bottom:72px}
 .p1 .cap{display:block}
 .p2{margin-left:14%;margin-bottom:80px}
 .p2 .cap{width:auto}
 .p3{width:72%;margin:0 0 88px}
 .p4{margin-bottom:72px}
 .p5{margin:0 -16px 80px}
 .p5 .cap{padding:0 16px}
 .p6{width:86%;margin-left:auto;margin-bottom:56px}
 .p6 .cap{padding:0}
 .index{padding:16px}
 .index h2{padding-left:0;font-size:15.5px;margin-bottom:20px}
 .cat{grid-template-columns:repeat(3,1fr);gap:20px 10px}
 .cat .t{font-size:11px;letter-spacing:.03em}
 .about{padding:48px 16px 16px;font-size:13.5px;line-height:1.85}
 .head{padding:88px 16px 28px}
 .head h1{font-size:28.5px}
 .works{padding:0 16px}
 .work{display:block;margin-bottom:64px}
 .work figure{margin-bottom:14px}
 .wa figure{margin-left:10%}
 .wc figure{width:76%;margin-left:auto}
 .w0 figure{margin:0 -16px 14px}
 .w0 .cap{display:block;padding-top:0}
 .work h2,.w0 h2{font-size:16.5px}
 .work .ph{font-size:13.5px}
 .work details{margin-top:14px}
 details dl{grid-template-columns:6.5em 1fr;gap:8px 12px}
 .threads,.doors{padding:16px 16px 40px}
 .threads>h2,.doors>h2{font-size:15.5px;margin-bottom:18px}
 .thread{display:block;margin-bottom:36px}
 .thread h3{font-size:14.5px}
 .thread ul{margin-top:14px;gap:10px}
 .tline{margin:-12px 0 20px}
 .doors ul{grid-template-columns:repeat(2,1fr);gap:18px 12px}
 footer{padding:20px 16px 40px}
}
@media (prefers-reduced-motion:reduce){.plate figure img{transition:none}}