/* デザイン E 縦組（2026-11-08 決定）。日本語は縦書きの明朝、英語は横書きの Cormorant。朱の四角を印に。 */
:root{--bg:#eeebe3;--ink:#151413;--mute:#8b857a;--line:#cdc7bb;--shu:#a8321f;--lb:#eeebe3fa;--rail:72px}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{background:var(--bg);color:var(--ink);font-family:'Shippori Mincho B1','Hiragino Mincho ProN','Yu Mincho',serif;font-size:16px;line-height:1.9;overflow-x:hidden}
body.en{font-family:'Cormorant Garamond','Shippori Mincho B1',serif;font-size:18px}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%;height:auto}
.v{writing-mode:vertical-rl;text-orientation:mixed}
.tcy{text-combine-upright:all;-webkit-text-combine:horizontal}
.lat{font-family:'Cormorant Garamond',serif;font-style:italic}
.num{writing-mode:horizontal-tb;display:inline-block;font-family:'Cormorant Garamond',serif;font-style:italic;font-size:12px;color:var(--mute);letter-spacing:.04em;margin-top:.7em}
.draft{position:relative;z-index:20;background:var(--ink);color:var(--bg);font:12px/1.6 -apple-system,'Hiragino Sans',sans-serif;text-align:center;padding:4px 16px;margin-right:var(--rail)}

/* 右端の柱（名前・朱の印・メニュー） */
.rail{position:fixed;top:0;right:0;bottom:0;width:var(--rail);display:flex;flex-direction:column;align-items:center;padding:28px 0;gap:22px;z-index:10;background:var(--bg)}
.rail .nm{font-size:19px;letter-spacing:.5em;font-weight:500}
.en .rail .nm{font-family:'Cormorant Garamond',serif;font-size:16px;letter-spacing:.32em;text-transform:uppercase}
.seal{display:block;width:16px;height:16px;background:var(--shu)}
.rail nav{display:flex;flex-direction:column;align-items:center;gap:22px;font-size:13px;letter-spacing:.4em;margin-top:auto}
.en .rail nav{font-family:'Cormorant Garamond',serif;font-size:14px;letter-spacing:.24em}
.rail nav a.lang{font-family:'Cormorant Garamond',serif;font-style:italic;letter-spacing:.1em;color:var(--mute)}
.en .rail nav a.lang{font-family:'Shippori Mincho B1',serif;font-style:normal;letter-spacing:.3em}
.rail a:hover{color:var(--shu)}
main{margin-right:var(--rail);min-height:70vh}
footer{margin:22vh var(--rail) 0 0;padding:0 4vw 40px;font-family:'Cormorant Garamond',serif;font-style:italic;font-size:13px;color:var(--mute);letter-spacing:.14em}

/* 写真 */
.ph a.zoom{display:block;cursor:zoom-in}
.ph figcaption{font-size:11px;color:var(--mute);letter-spacing:.24em;margin-top:10px;line-height:1.7}
.en .ph figcaption{font-family:'Cormorant Garamond',serif;font-style:italic;font-size:14px;letter-spacing:.06em}
.ph .cap{display:block}
.ph .txt{display:block;max-width:34em;margin-top:10px;color:var(--ink);font-size:14px;line-height:2.1;letter-spacing:.06em}
.en .ph .txt{font-size:17px;line-height:1.7;letter-spacing:0;font-style:normal}

/* トップの一枚 */
.hero{display:grid;grid-template-columns:5vw 1fr auto 7vw;align-items:end;min-height:100vh;padding:8vh 0 10vh}
.hero .ph{grid-column:2}
.hero .ph img{max-height:82vh;width:auto}
.hero .ph figcaption{display:none}
.hero .cap-v{grid-column:3;font-size:13px;letter-spacing:.32em;color:var(--mute);padding-left:22px;height:46vh}
.en .hero .cap-v{font-family:'Cormorant Garamond',serif;font-style:italic;font-size:15px;letter-spacing:.14em}

/* Series の扉（日本語: 縦の題と縦組の文章、英語: 横書きの文章と縦の題字） */
.chap{display:flex;flex-direction:row-reverse;align-items:flex-start;gap:3vw;margin-top:16vh;padding:0 4vw}
.chap .ttl{font-size:clamp(64px,10vw,168px);font-weight:500;line-height:1.05;letter-spacing:.06em;flex:0 0 auto}
.chap .ttl a:hover{color:var(--shu)}
.chap .ttl .lat{display:block;font-size:.17em;letter-spacing:.24em;color:var(--mute);margin-top:.6em;font-weight:400}
.chap .body{height:min(64vh,600px);font-size:15px;line-height:2.4;letter-spacing:.14em;overflow-x:auto;overflow-y:hidden;max-width:100%}
.chap .body p{margin-left:1.6em}
.chap .body.vs{height:auto;overflow:visible;display:flex;flex-direction:row-reverse;flex-wrap:wrap;align-content:flex-start;gap:7vh 0;flex:1}
.chap .body.vs p{writing-mode:vertical-rl;height:min(64vh,600px);margin-left:2.4em}
.chap .body .credit{color:var(--mute);font-size:12px}
.chap .more{font-size:13px;letter-spacing:.4em;color:var(--shu);margin-left:2.4em}
.en .chap{flex-direction:row;justify-content:space-between;gap:4vw}
.en .chap .tx{flex:1;max-width:38em;padding:3vh 0 0 6vw}
.en .chap h1,.en .chap h2{font-weight:400;font-style:italic;font-size:clamp(56px,7vw,112px);line-height:.9}
.en .chap .sub{font-size:13px;letter-spacing:.3em;text-transform:uppercase;color:var(--mute);margin:18px 0 6vh}
.en .chap .st{font-size:20px;line-height:1.75}
.en .chap .st p{margin-bottom:1.1em}
.en .chap .st p:first-child{font-style:italic;font-size:24px}
.en .chap .credit{color:var(--mute);font-size:14px;font-style:italic;margin-top:2em}
.en .chap .more{display:inline-block;margin:4vh 0 0;font-size:14px;letter-spacing:.24em;text-transform:uppercase}
.en .chap .ttl{font-family:'Shippori Mincho B1',serif}

/* 写真を崩して置く（5枚ひと組の型を繰り返す） */
.coll{display:grid;grid-template-columns:repeat(12,1fr);padding:14vh 4vw 0;row-gap:13vh}
.coll .ph:nth-child(5n+1){grid-column:1/8}
.coll .ph:nth-child(5n+2){grid-column:9/12;align-self:end}
.coll .ph:nth-child(5n+3){grid-column:3/7}
.coll .ph:nth-child(5n+4){grid-column:7/13;margin-top:16vh}
.coll .ph:nth-child(5n+5){grid-column:2/11}
.coll .ph img{max-height:86vh;width:auto}

/* ページの題 */
.ptl{display:flex;flex-direction:row-reverse;align-items:flex-start;gap:3vw;margin-top:12vh;padding:0 4vw}
.ptl.home{margin-top:24vh}
.ptl h1,.ptl h2{font-size:clamp(40px,5.4vw,88px);font-weight:500;letter-spacing:.14em;line-height:1.2;flex:0 0 auto}
.ptl .sub{font-size:13px;color:var(--mute);letter-spacing:.24em}
.ptl .intro{height:min(56vh,520px);font-size:15px;line-height:2.3;letter-spacing:.12em;overflow-x:auto;overflow-y:hidden;max-width:100%}
.ptl .intro p{margin-left:1.4em}
.en .ptl{flex-direction:column;align-items:stretch;gap:0;padding:0 4vw 0 6vw}
.en .ptl h1,.en .ptl h2{font-style:italic;font-weight:400;letter-spacing:-.005em;font-size:clamp(48px,6vw,96px);line-height:1}
.en .ptl .sub{font-size:13px;letter-spacing:.24em;text-transform:uppercase;margin-top:14px}
.en .ptl .intro{height:auto;max-width:36em;font-size:20px;line-height:1.7;letter-spacing:0;margin-top:5vh}
.en .ptl .intro p{margin:0 0 1em}

/* Archive の各節（静かな三段組） */
.grid{columns:3 300px;column-gap:3vw;padding:12vh 4vw 0}
.part-h{margin:16vh 4vw 0;padding-top:12px;border-top:1px solid var(--line);font-size:20px;font-weight:500;letter-spacing:.2em;display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 22px}
.part-h .psub{font-size:12px;font-weight:400;letter-spacing:.14em;color:var(--mute)}
.en .part-h{margin-left:6vw;font-family:'Cormorant Garamond',serif;font-style:italic;font-weight:400;font-size:28px;letter-spacing:0}
.en .part-h .psub{font-style:normal;font-size:13px;letter-spacing:.2em;text-transform:uppercase}
.part-h+.grid{padding-top:6vh}
.grid .ph{break-inside:avoid;margin-bottom:6vh}
.grid figcaption{display:none}

/* Archive の目次（日本語: 縦組の目次、英語: 横書きの段組） */
.toc{margin:14vh 4vw 0;display:flex;flex-direction:row-reverse;flex-wrap:wrap;row-gap:9vh}
.toc .grp{display:flex;flex-direction:row-reverse;border-right:1px solid var(--ink);padding-right:10px;margin-left:24px;flex:0 0 auto}
.toc h3{font-size:12px;letter-spacing:.5em;color:var(--shu);font-weight:500;margin-left:14px}
.toc a{display:block;font-size:18px;letter-spacing:.2em;line-height:1.5;padding:0 6px;height:10.5em;position:relative}
.toc a:hover{color:var(--shu)}
.toc a .pv{position:absolute;top:0;right:100%;width:22vw;max-width:340px;opacity:0;pointer-events:none;transition:opacity .2s;writing-mode:horizontal-tb;z-index:3}
.toc a:hover .pv{opacity:1}
.toce{margin:14vh 4vw 0 6vw;display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:6vh 3vw}
.toce h3{font-weight:500;font-size:11px;letter-spacing:.36em;text-transform:uppercase;color:var(--shu);border-top:1px solid var(--ink);padding-top:10px;margin-bottom:14px;min-height:4.2em}
.toce a{display:flex;justify-content:space-between;gap:8px;font-size:21px;line-height:1.55;position:relative}
.toce a .num{margin:0;font-size:13px}
.toce a:hover{color:var(--shu)}
.toce a .pv{position:absolute;bottom:110%;left:0;width:20vw;max-width:300px;opacity:0;pointer-events:none;transition:opacity .2s;z-index:3}
.toce a:hover .pv{opacity:1}
.sec-h{margin:22vh 4vw 0;font-size:12px;letter-spacing:.5em;color:var(--mute);font-weight:400}
.ja .sec-h{text-align:right;letter-spacing:.6em}
.en .sec-h{margin-left:6vw;font-family:'Cormorant Garamond',serif;letter-spacing:.36em;text-transform:uppercase}

/* 略歴 */
.about{display:flex;flex-direction:row-reverse;gap:3vw;margin-top:12vh;padding:0 4vw}
.about .bio{height:min(70vh,640px);font-size:15px;line-height:2.3;letter-spacing:.12em;overflow-x:auto;overflow-y:hidden;max-width:100%}
.about .bio h1{font-size:clamp(36px,4.4vw,64px);font-weight:500;letter-spacing:.3em;margin-left:.8em}
.about .bio h2{font-size:12px;font-weight:500;letter-spacing:.5em;color:var(--shu);margin-left:1em;margin-right:2.4em}
.about .bio p{margin-left:1.2em}
.en .about{flex-direction:column;padding:0 4vw 0 6vw}
.en .about .bio{height:auto;max-width:36em;font-size:20px;line-height:1.7;letter-spacing:0}
.en .about .bio h1{font-style:italic;font-weight:400;letter-spacing:0;font-size:clamp(48px,6vw,88px);line-height:1;margin:0 0 3vh}
.en .about .bio h2{font-family:'Cormorant Garamond',serif;font-size:12px;letter-spacing:.36em;text-transform:uppercase;margin:6vh 0 8px}
.en .about .bio p{margin:0}
.about-strip{display:grid;grid-template-columns:repeat(12,1fr);gap:0 2vw;padding:16vh 4vw 0;row-gap:8vh}
.about-strip .ph:nth-child(3n+1){grid-column:1/6}
.about-strip .ph:nth-child(3n+2){grid-column:7/11;margin-top:12vh}
.about-strip .ph:nth-child(3n+3){grid-column:3/9}
.notfound{margin:30vh 4vw;text-align:center;color:var(--mute)}

/* 拡大表示 */
#lb{position:fixed;inset:0;background:var(--lb);display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:30;padding:24px 56px}
#lb[hidden]{display:none}
#lbf img{max-width:calc(100vw - 112px);max-height:84vh;width:auto;height:auto}
#lbc{margin-top:14px;font-size:12px;letter-spacing:.2em;color:var(--mute);text-align:center;min-height:1.6em}
.en #lbc{font-family:'Cormorant Garamond',serif;font-style:italic;font-size:15px;letter-spacing:.06em}
#lb button{position:absolute;background:none;border:0;color:var(--ink);cursor:pointer;font-family:'Cormorant Garamond',serif;line-height:1;padding:10px}
#lbx{top:10px;right:14px;font-size:32px}
#lbp,#lbn{top:50%;transform:translateY(-50%);font-size:44px;color:var(--mute)}
#lbp{left:6px}#lbn{right:6px}
#lb button:hover{color:var(--shu)}

@media(max-width:700px){
  :root{--rail:0px}
  body{font-size:15px}
  .rail{position:sticky;top:0;bottom:auto;width:auto;flex-direction:row;justify-content:space-between;padding:14px 16px;gap:12px;border-bottom:1px solid var(--line)}
  .rail .nm,.en .rail .nm{writing-mode:horizontal-tb;letter-spacing:.24em;font-size:15px}
  .en .rail .nm{font-size:11px;letter-spacing:.1em}
  .seal{width:12px;height:12px;margin-right:auto}
  .rail nav,.en .rail nav{flex-direction:row;margin:0;gap:14px}
  .rail nav a{writing-mode:horizontal-tb;letter-spacing:.14em}
  .rail{flex-wrap:wrap;row-gap:8px}.rail a{white-space:nowrap}
  .en .rail nav{gap:10px}.en .rail nav a{letter-spacing:.02em;font-size:13px}.en .rail nav a.lang{letter-spacing:.06em}
  .hero{grid-template-columns:16px 1fr auto 8px;min-height:auto;padding:4vh 0}
  .hero .cap-v{height:32vh;padding-left:10px;font-size:12px}
  .chap,.ptl,.about{gap:12px;margin-top:10vh;padding:0 16px}
  .chap .ttl{font-size:56px}
  .chap .body,.ptl .intro,.about .bio{height:56vh;font-size:14px}
  .chap .body.vs{display:block;writing-mode:vertical-rl;height:56vh;overflow-x:auto}.chap .body.vs p{height:auto}
  .en .chap{flex-direction:column-reverse}.en .chap .tx{padding:0}.en .chap .ttl{font-size:48px;align-self:flex-end}
  .en .chap .st{font-size:17px}.en .ptl,.en .about{padding:0 16px}.en .ptl .intro,.en .about .bio{font-size:17px}
  .coll{display:block;padding:8vh 16px 0}.coll .ph{margin:0 0 8vh!important}
  .grid{columns:1;padding:8vh 16px 0}
  .part-h,.en .part-h{margin:12vh 16px 0}
  .toc{margin:10vh 16px 0}.toc a{font-size:16px;height:9em}.toc a .pv,.toce a .pv{display:none}
  .toce{margin:10vh 16px 0}.toce h3{min-height:0}
  .sec-h,.en .sec-h{margin:14vh 16px 0}
  .about-strip{display:block;padding:10vh 16px 0}.about-strip .ph{margin-bottom:6vh}
  footer{margin:16vh 0 0;padding:0 16px 32px}
  .draft{margin:0}
  #lb{padding:16px 8px}#lbf img{max-width:calc(100vw - 16px)}#lbp,#lbn{display:none}
}