/* FV renewal v2: ペーパー×ブルーのエディトリアル + スクロール連動(ピン留め)演出
   top-fv.css の後に読み込み、FV部分だけを上書きする。 進行度は js/top-fv-scroll.js が --p/--e/--o1/--o2 に入れる */
.top-art-page .art-fv{
  --paper:#f1edde;--blue:#054780;--ink:#252722;
  --p:0;--e:0;--o1:1;--o2:0;
  position:relative;height:300vh;height:300svh;min-height:0;max-height:none;width:100%;
  background:var(--paper);color:var(--ink);overflow:visible;display:block;
}
.top-art-page .art-fv *{will-change:auto}
.art-pin{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;background:var(--paper);isolation:isolate}

/* 罫線 */
.art-rules i{position:absolute;top:0;bottom:0;width:1px;background:rgba(37,39,34,.14);z-index:0}
.art-rules i:nth-child(1){left:6.6%}.art-rules i:nth-child(2){right:6.6%}

/* 巨大タイポ(人物の後ろ) */
.art-word{position:absolute;left:0;right:0;top:37%;z-index:1;pointer-events:none;font-family:'Barlow Condensed','Arial Narrow','Helvetica Neue',sans-serif;font-weight:600;text-transform:uppercase;line-height:.82;letter-spacing:-.01em;white-space:nowrap;font-size:min(25vw,34svh)}
.art-word span{display:block;will-change:transform}
.art-word .w1{margin-left:5vw;color:transparent;-webkit-text-stroke:1.5px rgba(37,39,34,.7);transform:translate3d(calc(var(--p)*-22vw),0,0)}
.art-word .w2{margin-left:24vw;color:var(--blue);transform:translate3d(calc(var(--p)*16vw - 6vw),0,0)}
/* ブルーのパネル: スクロールで全面に広がる。中の文字は反転色 */
.art-panel{position:absolute;inset:0;z-index:2;background:var(--blue);
  clip-path:inset(calc(15svh*(1 - var(--e))) calc(6.6vw*(1 - var(--e))) 0 calc(54vw*(1 - var(--e))))}
.art-word.inv{top:37%}
.art-word.inv .w1{-webkit-text-stroke:1.5px rgba(241,237,222,.8)}
.art-word.inv .w2{color:var(--paper)}

/* 人物 */
.art-person{position:absolute;z-index:3;left:70%;bottom:0;top:auto;height:90svh;width:auto;max-width:none;transform-origin:50% 100%;mask-image:none;-webkit-mask-image:none;
  transform:translate3d(calc(-50% - var(--e)*11vw),calc(var(--e)*3svh),0) scale(calc(1 + var(--e)*.12))}

/* 左上のアイデンティティ(スクロールで退場) */
.art-left{position:absolute;left:6.6%;top:118px;z-index:4;width:min(26vw,290px);opacity:var(--o1);transform:translate3d(0,calc(var(--p)*-9svh),0)}
.top-art-page .art-identity{position:static;width:100%;text-align:left;opacity:1}
.art-identity>img{display:block;width:100%;height:auto}
.top-art-page .art-identity h1{margin:16px 0 6px;font:600 13px/1.5 var(--sans);letter-spacing:.38em}
.top-art-page .art-identity p{margin:0;font:600 9px/1.7 var(--sans);letter-spacing:.22em;color:var(--muted);white-space:nowrap}

/* 最終メッセージ(青の上、紙色) */
.art-final{position:absolute;left:6.6%;top:10svh;z-index:4;color:var(--paper);opacity:var(--o2);transform:translate3d(0,calc((1 - var(--o2))*40px),0)}
.art-final .ja{margin:0;font:500 clamp(26px,3.5vw,56px)/1.28 var(--sans);letter-spacing:.08em}
.art-final .en{margin:22px 0 0;font:500 clamp(17px,1.7vw,26px)/1.6 'Barlow Condensed','Helvetica Neue',sans-serif;letter-spacing:.14em;opacity:.85;text-transform:none}

/* 隅のメタ情報 */
.art-meta{position:absolute;bottom:28px;z-index:5;font-size:10px;letter-spacing:.35em;display:flex;gap:22px;align-items:center;mix-blend-mode:normal}
.art-meta-l{left:6.6%;color:var(--ink);opacity:var(--o1)}
.art-meta-r{right:6.6%;color:var(--paper);mix-blend-mode:difference}
.art-bar{display:block;width:64px;height:1px;background:rgba(255,255,255,.35);position:relative}
.art-bar i{position:absolute;left:0;top:0;height:100%;width:100%;background:#fff;transform:scaleX(var(--p));transform-origin:left}
.art-meta-l span+span{opacity:.6}

/* ---- NEWS帯(FVの直後、通常フロー) ---- 横幅は .section と同じ 1130px に揃える */
.top-art-page .art-news{position:static;width:auto;max-width:none;margin:0;padding:64px max(6%,calc((100vw - 1130px)/2)) 56px;display:grid;grid-template-columns:1fr 2fr;gap:60px;align-items:start;background:var(--paper);animation:none;z-index:auto}
.top-art-page .art-news-heading{display:block}
.top-art-page .art-news-heading>span{display:none}
.top-art-page .art-news h2.section-label{margin:0;font-size:12px;letter-spacing:.22em;font-weight:500}
.top-art-page .art-news ul{padding:0;margin:0}
.top-art-page .art-news li{font-size:14px;line-height:2.1}
.top-art-page .art-news li:not(:has(time)){display:block}

/* PROFILE も同じ 1130px 幅に */
.top-art-page .bio{max-width:none;padding-left:max(6%,calc((100vw - 1130px)/2));padding-right:max(6%,calc((100vw - 1130px)/2))}

/* PROFILE本文: 左の見出し列を細くして本文幅を広げ、1行目・2行目が1行で収まるように。
   日本語は文節単位で折り返し、1〜2文字だけの行(ソングライタ/ー。 など)が出ないようにする */
@media(min-width:701px){
  .top-art-page .bio,.top-art-page .art-news{grid-template-columns:minmax(0,.55fr) minmax(0,2fr)}
}
.top-art-page .bio-copy{max-width:760px}
.top-art-page .bio-copy p,.top-art-page .bio h2{word-break:auto-phrase;text-wrap:balance;overflow-wrap:anywhere}
.top-art-page .bio-copy p{line-break:strict}

/* お問い合わせ下〜フッター間の余白 (従来の約2.5倍) */
.top-art-page .contact{padding-bottom:35px}
.top-art-page .contact-bottom{padding-bottom:255px}

/* ---- タブレット/スマホ ---- */
@media(max-width:1023px){
  .art-person{left:66%;height:78svh}
  .art-left{width:min(30vw,260px)}
}
@media(max-width:700px){
  .top-art-page .art-fv{height:260svh}
  .art-word{top:36%;font-size:min(34vw,24svh)}
  .art-word .w1{margin-left:4vw;transform:translate3d(calc(var(--p)*-26vw),0,0)}
  .art-word .w2{margin-left:18vw;transform:translate3d(calc(var(--p)*14vw - 4vw),0,0)}
  .art-panel{clip-path:inset(calc(34svh*(1 - var(--e))) calc(6vw*(1 - var(--e))) 0 calc(6vw*(1 - var(--e))))}
  .art-person{left:62%;height:62svh;transform:translate3d(calc(-50% - var(--e)*12vw),calc(var(--e)*2svh),0) scale(calc(1 + var(--e)*.1))}
  .art-left{top:92px;width:56vw}
  .top-art-page .art-identity h1{font-size:11px;letter-spacing:.3em}
  .top-art-page .art-identity p{font-size:8px;letter-spacing:.2em}
  .art-final{top:12svh}
  .art-final .en{margin-top:14px;font-size:17px}
  .art-meta-l span+span{display:none}
  .top-art-page .art-news{grid-template-columns:1fr;gap:20px;padding:44px 7% 40px}
  .top-art-page .bio{padding-left:7%;padding-right:7%}
  .top-art-page .contact-bottom{padding-bottom:185px}
}
/* 動きを減らす設定: ピン留めせず静止表示 */
@media(prefers-reduced-motion:reduce){
  .top-art-page .art-fv{height:auto}
  .art-pin{position:relative}
}