/* =========================================================
   LEGEND HALL / JOSHIN — editorial layout
   Layout rules (all sections share these tokens)
   ---------------------------------------------------------
   --canvas   : 最大コンテンツ幅（HERO・ワイド写真の基準）
   --col      : 本文カラム幅（全章共通・中央）
   --rail     : 本文カラム右側へ張り出す写真レール幅
   --gap-row  : 写真と本文を横並びにする時の間隔
   --sec      : 章と章の間隔
   --head     : 見出しから本文までの距離
   --cap      : 写真とキャプションの距離
   ========================================================= */
:root{
  --article-paper:#fff;
  --article-ink:#171715;
  --article-muted:#716d66;
  --article-gold:#96763f;
  --article-line:rgba(23,23,21,.18);

  --canvas:1200px;
  --col:720px;
  --rail:240px;
  --rail-photo:260px;
  --gap-row:60px;
  --gutter:48px;
  --sec:120px;
  --head:32px;
  --cap:12px;

  --fs-body:15px;
  --lh-body:2.05;
  --fs-h2:26px;
  --fs-label:10px;

  --serif:Georgia,"Yu Mincho","YuMincho","Hiragino Mincho ProN",serif;
  --sans:-apple-system,BlinkMacSystemFont,"Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif;
  --latin:Inter,Manrope,Arial,sans-serif;
}

*{box-sizing:border-box}
body.joshinPage{margin:0;background:var(--article-paper);color:var(--article-ink);font-family:var(--sans)}
.joshinPage a{color:inherit;text-decoration:none}
.joshinPage img{display:block;max-width:100%;height:auto}
.joshinPage .siteHeader{position:relative;background:#171715;border-bottom-color:rgba(255,255,255,.16)}
.joshinPage .topnav>a.active{color:#e3bf53}
.joshinMain{background:var(--article-paper)}
figure{margin:0}

/* ---------- HERO ---------- */
.jHero{padding:216px var(--gutter) 24px;background:#fff;max-width:100%}
.jHeroInner{max-width:1100px;margin:0 auto;display:grid;grid-template-columns:minmax(0,640px) 390px;column-gap:64px;justify-content:center;align-items:stretch}
.jHeroPhotos{display:grid;grid-template-columns:1fr 1fr;gap:14px;align-content:start}
.jHeroPhoto img{width:100%;height:auto}
.jHeroPhotoLower{grid-column:1/3}
.jHeroCopy{display:flex;flex-direction:column;min-width:0}
.jHeroLabel,.jHeroRoute{margin:0;font-family:var(--latin);font-size:var(--fs-label);font-weight:600;line-height:1.5;letter-spacing:.18em;color:var(--article-gold)}
.jHeroBody{flex:1;display:flex;flex-direction:column;align-items:flex-start;margin-top:28px}
.jHeroCopy h1{margin:0;font:500 28px/1.5 var(--serif);letter-spacing:.08em;writing-mode:vertical-rl;text-orientation:mixed;white-space:nowrap}
.jHeroMeta{margin-top:auto;padding-top:28px}
.jHeroDate{margin:0;font:600 14px/1.8 var(--serif);white-space:nowrap}
.jHeroRoute{margin-top:10px;color:var(--article-muted)}
.tcy{text-combine-upright:all;-webkit-text-combine:horizontal}

/* ---------- ARTICLE GRID ---------- */
.storyArticle{width:100%;padding:0 var(--gutter) 128px}
/* 本文カラム：全章この左端を共有する */
.col{width:auto;max-width:var(--col);margin-left:max(0px,calc((100% - var(--col))/2));margin-right:max(0px,calc((100% - var(--col))/2))}
/* 本文カラム＋右レール（写真横並び・2段組） */
.chapter-row,.article-duo,.chapter--cols{
  margin-left:max(0px,calc((100% - var(--col))/2));
  margin-right:max(0px,calc((100% - var(--col))/2 - var(--rail)));
}

.articleHeader,.article-section-header{position:static;height:auto;padding:0;display:block;color:inherit;background:transparent;border:0}
.articleHeader{padding:var(--sec) 0 0}
.articleRoute,.article-label{margin:0;font-family:var(--latin);font-size:var(--fs-label);font-weight:600;line-height:1.5;letter-spacing:.2em;color:var(--article-gold)}
.articleHeader .article-label{margin-top:28px;color:var(--article-muted)}
.articleHeader h2{margin:12px 0 0;font:600 30px/1.55 var(--serif);letter-spacing:.02em}

.article-section{position:relative;padding:0;border:0}
.introduction{padding-top:var(--head)}
.introduction-lead{margin:0 0 40px;font:600 19px/2 var(--serif);letter-spacing:.02em}
.article-copy p,.interview-answer p,.current-hall>p:not(.article-label){margin:0 0 1.6em;font-size:var(--fs-body);line-height:var(--lh-body);letter-spacing:.03em}
.article-copy p:last-child,.interview-answer p:last-child,.current-hall>p:last-of-type{margin-bottom:0}

/* ---------- INTERVIEW ---------- */
.interview{margin-top:var(--sec);padding-top:96px;border-top:1px solid var(--article-line)}
.interview-opener{max-width:960px;margin:0 auto;display:grid;grid-template-columns:400px minmax(0,1fr);column-gap:72px;align-items:center}
.interview-introduction h2,.article-section-header h2,.article-information h2,.current-hall h2{margin:14px 0 0;font:600 var(--fs-h2)/1.6 var(--serif);letter-spacing:.02em}
.interview-introduction h2{font-size:30px;line-height:1.55}
.interview-person{margin:18px 0 0;font-size:var(--fs-body);line-height:2;color:var(--article-muted)}

.chapter,.chapter-row,.fig-wide,.article-duo{margin-top:var(--sec)}
.article-section-header{margin-bottom:var(--head)}
.interview-questions{display:grid;gap:6px}
.interview-question{margin:0;font:500 var(--fs-body)/2 var(--serif);letter-spacing:.02em;color:#3a3833}
.interview-answer{margin-top:28px}
.interview-answer + .interview-questions{margin-top:48px}

/* 写真サイズのルール：
   fig-rail 260px（人物・照明：章の横）／ fig-inset 400px（PA卓：本文カラム内）
   fig-wide 960px（ホール写真） */
.article-figure img{width:100%;height:auto}
.article-figure figcaption{margin-top:var(--cap);font-family:var(--latin);font-size:10px;line-height:1.6;letter-spacing:.14em;color:var(--article-muted)}
.chapter-row{display:grid;grid-template-columns:minmax(0,1fr) var(--rail-photo);column-gap:var(--gap-row);align-items:start}
.fig-rail{padding-top:6px}
.fig-wide{width:min(100%,960px);margin-left:auto;margin-right:auto}
.fig-inset{margin-top:56px;display:grid;grid-template-columns:400px minmax(0,1fr);column-gap:24px;align-items:end}
.fig-inset figcaption{margin:0}

.article-duo{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:80px;align-items:start}
.article-duo .chapter,.chapter-row .chapter{margin-top:0}
/* 2カラム章：見出しは全幅、本文は等幅2段（本文カラム左端〜右レール端） */
.chapter-cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:72px;align-items:start}
.chapter-cols__item > .interview-answer:first-child{margin-top:0}

/* ---------- INFORMATION / CURRENT ---------- */
.article-information{margin-top:var(--sec);padding:44px 0 20px;border-top:1px solid var(--article-ink);border-bottom:1px solid var(--article-ink)}
.information-list{margin:32px 0 0}
.information-list>div{display:grid;grid-template-columns:150px 1fr;gap:28px;padding:20px 0;border-top:1px solid var(--article-line)}
.information-list dt{padding-top:5px;font-family:var(--latin);font-size:10px;font-weight:600;letter-spacing:.14em;color:var(--article-gold)}
.information-list dd{margin:0}
.information-list strong{display:block;font:600 16px/1.65 var(--serif)}
.information-list span{display:block;margin-top:4px;font-size:13px;line-height:1.8;color:var(--article-muted)}
.current-hall{margin-top:96px}
.current-hall h2{margin-bottom:20px}
.article-links{margin-top:36px;border-top:1px solid var(--article-line)}
.article-links a{display:flex;justify-content:space-between;gap:24px;padding:17px 0;border-bottom:1px solid var(--article-line);font-size:14px;font-weight:600}
.article-links a:hover{color:var(--article-gold)}

/* ---------- FOOTER (unchanged) ---------- */
.eventFooter{background:#11110f;color:#e9e5dd}
.eventFooterMain{padding:38px 6vw 34px;display:grid;grid-template-columns:1fr 1fr;gap:8vw}
.eventFooterMain small{display:block;font-size:7px;letter-spacing:.17em;color:#a7894e}
.eventFooterMain strong{display:block;font:500 17px/1.55 Georgia,"Yu Mincho",serif;margin:10px 0}
.eventFooterMain p{font-size:8px;color:#8f8980}
.eventFooterMain nav{display:grid;grid-template-columns:1fr 1fr;align-content:start}
.eventFooterMain nav a{padding:9px 0;border-bottom:1px solid rgba(255,255,255,.14);font-size:9px;color:#c8c2b9}
.eventFooterMain nav a:nth-child(odd){margin-right:24px}
.eventFooterMain nav a[aria-current="page"]{color:#d7bc7b}
.eventFooterBottom{display:flex;justify-content:space-between;padding:14px 6vw;border-top:1px solid rgba(255,255,255,.1);font-size:7px;letter-spacing:.15em;color:#777168}

/* ---------- TABLET (761–1024) : header is fixed 60px ---------- */
@media(max-width:1024px){
  :root{--gutter:32px;--sec:96px;--rail-photo:220px;--gap-row:40px}
  .jHero{padding-top:124px;padding-bottom:16px}
  .jHeroInner{grid-template-columns:minmax(0,1fr) 333px;column-gap:48px}
  .jHeroCopy h1{font-size:24px}
  .interview-opener{grid-template-columns:300px minmax(0,1fr);column-gap:48px}
  .fig-inset{grid-template-columns:360px minmax(0,1fr)}
  .chapter-cols{column-gap:48px}
  .article-duo{column-gap:48px}
}

@media(max-width:900px){
  .chapter-cols{display:block}
  .chapter-cols__item + .chapter-cols__item{margin-top:1.6em}
  .chapter-cols__item + .chapter-cols__item > .interview-questions:first-child{margin-top:48px}
}

/* ---------- SMARTPHONE ---------- */
@media(max-width:760px){
  :root{--gutter:20px;--sec:80px;--head:24px;--fs-body:15px;--lh-body:2;--fs-h2:22px}
  .joshinPage .siteHeader{height:68px;background:#171715}
  .joshinPage .siteLogo{width:104px;height:auto}
  .joshinPage .siteLogo img{width:100%;height:auto;object-fit:contain}
  .joshinPage .mobileMenuInner>a.active{color:#e3bf53}

  .jHero{padding:100px var(--gutter) 0}
  .jHeroInner{display:flex;flex-direction:column-reverse;gap:32px}
  .jHeroPhotos{gap:10px}
  .jHeroBody{display:block;margin-top:16px}
  .jHeroCopy h1{width:100%;font-size:clamp(25px,7vw,30px);line-height:1.5;letter-spacing:.01em;writing-mode:horizontal-tb;white-space:nowrap}
  .tcy{text-combine-upright:none;-webkit-text-combine:none}
  .jHeroMeta{margin-top:18px;padding:0}
  .jHeroDate{white-space:normal}

  .articleHeader{padding-top:16px}
  .articleHeader h2{font-size:26px}
  .introduction-lead{margin-bottom:28px;font-size:18px;line-height:1.9}
  .introduction-lead br,.interview-question br{display:none}
  .interview-introduction h2{font-size:24px}

  .chapter-row,.article-duo,.chapter--cols{margin-left:0;margin-right:0;display:block}
  .interview-opener{display:block}
  .interview-opener .fig-portrait{width:78%;margin-bottom:32px}
  .fig-rail{width:62%;margin:40px 0 0 auto;padding:0}
  .fig-inset{display:block;margin-top:40px}
  .fig-inset figcaption{margin-top:var(--cap)}
  .article-duo .chapter + .chapter{margin-top:var(--sec)}

  .information-list>div{grid-template-columns:100px 1fr;gap:18px;padding:18px 0}
  .current-hall{margin-top:72px}
  .eventFooterMain{grid-template-columns:1fr;padding:30px 18px 27px;gap:25px}
  .eventFooterMain nav{grid-template-columns:1fr 1fr}
  .eventFooterBottom{padding:13px 18px}
}
@media(max-width:390px){
  .information-list>div{grid-template-columns:88px 1fr;gap:14px}
  .eventFooterBottom{gap:18px}
}

/* =========================================================
   INTERVIEW typography — small editorial setting (2026-10-12)
   本文・質問 14px / 行間 2.15 / 字間 .04em、見出し 21px
   ========================================================= */
.interview{--iv-fs:14px;--iv-lh:2.15;--iv-ls:.04em;--iv-h2:21px}
.interview .interview-answer p,
.interview .interview-person{font-size:var(--iv-fs);line-height:var(--iv-lh);letter-spacing:var(--iv-ls);margin:0 0 1.5em}
.interview .interview-answer p:last-child{margin-bottom:0}
.interview .interview-question{font-size:var(--iv-fs);line-height:var(--iv-lh);letter-spacing:var(--iv-ls)}
.interview .interview-questions{gap:2px}
.interview .interview-answer{margin-top:22px}
.interview .chapter-cols__item > .interview-answer:first-child{margin-top:0}
.interview .interview-answer + .interview-questions{margin-top:40px}
.interview .article-section-header{margin-bottom:28px}
.interview .article-section-header h2{margin-top:12px;font-size:var(--iv-h2);line-height:1.7;letter-spacing:.04em}
.interview .interview-introduction h2{font-size:24px;line-height:1.6;letter-spacing:.04em}
.interview .interview-lead{margin-top:20px}
.interview .chapter-cols{column-gap:96px}
@media(max-width:1024px){.interview .chapter-cols{column-gap:56px}}
@media(max-width:900px){
  .interview .chapter-cols__item + .chapter-cols__item{margin-top:1.5em}
  .interview .chapter-cols__item + .chapter-cols__item > .interview-questions:first-child{margin-top:40px}
}
@media(max-width:760px){
  .interview{--iv-fs:15px;--iv-lh:2;--iv-ls:.03em;--iv-h2:20px}
  .interview .interview-introduction h2{font-size:22px}
}

button:focus-visible,a:focus-visible{outline:2px solid var(--article-gold);outline-offset:4px}

/* JOSHIN current-nav refinement — underline below the label */
@media (min-width:761px){
  .joshinPage header.siteHeader .topnav > a.active{position:relative;text-decoration:none!important}
  .joshinPage header.siteHeader .topnav > a.active::before{bottom:-9px!important;height:2px!important}
}

/* PA卓の写真のみ：PC 270px（従来400pxの約68%）、キャプションは写真の直下 */
.fig-inset--pa{display:block}
.fig-inset--pa img{width:270px;max-width:100%}
.fig-inset--pa figcaption{margin-top:10px}
@media(max-width:1024px){.fig-inset--pa img{width:240px}}
@media(max-width:760px){.fig-inset--pa img{width:68%}}

/* =========================================================
   INTRODUCTION — letter sheet（移転のご挨拶）
   淡いアイボリーの紙面＋ごく薄い横罫・左余白ライン。影なし。
   本文の開始位置は他セクションと同じ（--col の左端）。
   ========================================================= */
:root{
  --note-paper:#faf7f1;
  --note-edge:#ebe4d8;
  --note-rule:rgba(122,104,78,.11);
  --note-margin:rgba(150,118,63,.24);
  --note-pad-x:72px;
}
.introLetter{
  position:relative;
  max-width:calc(var(--col) + var(--note-pad-x)*2);
  margin:var(--sec) auto 0;
  padding:72px var(--note-pad-x) 84px;
  background:var(--note-paper);
  border:1px solid var(--note-edge);
}
.introLetter::before{content:"";position:absolute;top:0;bottom:0;left:40px;width:1px;background:var(--note-margin)}
.introLetter .col{max-width:none;margin-left:0;margin-right:0}
.introLetter .articleHeader{padding-top:0}
.introLetter .introduction-lead{padding-bottom:28px;margin-bottom:32px;border-bottom:1px solid var(--note-edge)}
/* 横罫：本文1行の高さに合わせ、段落間も1行分にして罫線と文字を揃える */
.introLetter .article-copy{
  --rule:calc(var(--fs-body) * var(--lh-body));
  background-image:linear-gradient(to bottom,transparent calc(var(--rule) - 1px),var(--note-rule) calc(var(--rule) - 1px));
  background-size:100% var(--rule);
}
.introLetter .article-copy p{margin:0 0 var(--rule)}
.introLetter .article-copy p:last-child{margin-bottom:0}
@media(max-width:1024px){
  :root{--note-pad-x:48px}
  .introLetter{padding-top:56px;padding-bottom:64px}
  .introLetter::before{left:26px}
}
@media(max-width:760px){
  .introLetter{margin-top:48px;padding:40px 20px 48px 34px}
  .introLetter::before{left:18px}
  .introLetter .introduction-lead{padding-bottom:22px;margin-bottom:26px}
}

/* =========================================================
   Scroll reveal — quiet, once (opacity / transform only)
   フェード 0.8s / 移動 12px（写真 16px・0.9s）/ ease-out / 時間差 0.15s
   html.js-reveal が付いた時だけ有効（JS無効時は常に表示）
   ========================================================= */
@keyframes jRevealUp{from{opacity:0;transform:translate3d(0,12px,0)}to{opacity:1;transform:none}}
@keyframes jRevealPhoto{from{opacity:0;transform:translate3d(0,16px,0)}to{opacity:1;transform:none}}
@keyframes jRevealFade{from{opacity:0}to{opacity:1}}
html.js-reveal [data-reveal]{opacity:0}
html.js-reveal [data-reveal].is-shown{opacity:1;animation:jRevealUp .8s cubic-bezier(.22,.61,.36,1) var(--reveal-delay,0s) both}
html.js-reveal [data-reveal="fade"].is-shown{animation-name:jRevealFade}
html.js-reveal [data-reveal="photo"].is-shown{animation-name:jRevealPhoto;animation-duration:.9s}
@media (prefers-reduced-motion:reduce){
  html.js-reveal [data-reveal]{opacity:1!important;animation:none!important}
}