/* 高橋雄弥 監督サイト 試作版 style.css */
:root{
  --serif:"Noto Serif JP",serif;
  --sans:"Noto Sans JP",sans-serif;
  --en:"Cormorant Garamond",serif;
  --maxw:960px;
  --bg:#f4f1ea; --bg2:#ece8de; --ink:#2b2925; --sub:#6f6a60;
  --line:#d8d2c4; --accent:#8a8474; --grain-opacity:.5;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth; -webkit-text-size-adjust:100%; text-size-adjust:100%;}
body{
  background:var(--bg); color:var(--ink);
  font-family:var(--sans); font-weight:300;
  line-height:1.9; letter-spacing:.04em;
}
/* 手触り：フィルムグレイン */
body::before{
  content:""; position:fixed; inset:0; pointer-events:none; z-index:999;
  opacity:var(--grain-opacity); mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)' opacity='0.28'/%3E%3C/svg%3E");
}
/* ナビ */
header{
  max-width:var(--maxw); margin:0 auto; padding:44px 28px 0;
  display:flex; justify-content:space-between; align-items:baseline;
}
.logo{
  font-family:var(--sans); font-weight:400; font-size:13px; letter-spacing:.26em;
  color:var(--ink); text-decoration:none; line-height:1.5;
}
.logo span{ display:block; font-size:8px; letter-spacing:.4em; color:var(--sub); }
nav{ display:flex; gap:26px; }
nav a{
  color:var(--sub); text-decoration:none; font-size:12.5px; letter-spacing:.14em;
  position:relative; padding-bottom:3px; transition:color .3s;
}
nav a::after{
  content:""; position:absolute; left:0; bottom:0; width:0; height:1px;
  background:var(--accent); transition:width .35s ease;
}
nav a:hover{ color:var(--ink) } nav a:hover::after{ width:100% }
nav a.on{ color:var(--ink) } nav a.on::after{ width:100% }
/* Home hero */
.hero{
  max-width:var(--maxw); margin:0 auto;
  padding:0 28px; min-height:92vh;
  display:flex; flex-direction:column; justify-content:flex-end;
  position:relative;
}
#weave{
  position:absolute; left:0; top:0; right:0; bottom:0; width:100%; height:100%;
  pointer-events:none; z-index:0;
}
.hero > *:not(#weave){ position:relative; z-index:1; }
.name-block{ margin-top:auto; }
.ja-name{
  font-family:var(--serif); font-weight:500;
  font-size:26px; letter-spacing:.42em;
}
.credit-ja{ font-size:11px; color:var(--sub); letter-spacing:.42em; margin-bottom:14px; }
.en-name{ margin-top:16px; font-size:10.5px; color:var(--sub); letter-spacing:.3em; }
.scroll-cue{
  margin-top:8vh; margin-bottom:7vh;
  display:flex; flex-direction:column; align-items:flex-start; gap:10px;
}
.scroll-cue i{ display:block; width:1px; height:64px; background:var(--sub); }
.scroll-cue span{
  writing-mode:vertical-rl; font-size:9.5px; letter-spacing:.4em; color:var(--sub); margin-left:-4px;
}
.intro{ padding-top:12vh; padding-bottom:12vh; }
.statement{
  max-width:34em;
  font-family:var(--serif); font-size:clamp(15px,2.2vw,17.5px);
  line-height:2.5; letter-spacing:.09em;
}
.intro .role{ margin-top:28px; font-size:12px; color:var(--sub); letter-spacing:.22em; }
.draft-note{
  display:inline-block; margin-top:14px; font-size:10.5px; color:var(--accent);
  border:1px dashed var(--line); padding:2px 10px; border-radius:3px; letter-spacing:.1em;
}
/* 共通 */
section{ max-width:var(--maxw); margin:0 auto; padding:9vh 28px; }
.sec-label{
  font-family:var(--en); font-style:italic; font-size:14px; letter-spacing:.28em;
  color:var(--sub); margin-bottom:8px;
}
h2{
  font-family:var(--serif); font-weight:500; font-size:24px;
  letter-spacing:.2em; margin-bottom:6vh;
  display:flex; align-items:center; gap:20px;
}
.hr-wrap{ max-width:var(--maxw); margin:0 auto; padding:0 28px; }
.wavy-hr{ display:block; height:14px; }
.wavy-hr path{ stroke:var(--line); stroke-width:1.4; fill:none; }
.wavy-line{ height:12px; flex:0 0 auto; }
.wavy-line path{ stroke:var(--line); stroke-width:1.5; fill:none; }
/* 花：必ずどこかの線に触れて咲く。位置・向き・大きさはページごとに変える */
.flower{
  height:94px; width:auto; align-self:center; overflow:visible;
  transform:translateY(-46px) rotate(5deg); margin-left:-58px;
  flex:0 0 auto;
}
.flower-s{ height:72px; transform:translateY(-35px) rotate(-4deg); margin-left:-46px; }
/* 花が先・線が後（About等）：線の始まりを花の根元に潜り込ませる */
.bloom-row .flower:first-child{ margin-left:0; }
.bloom-row .flower + .wavy-line{ margin-left:-58px; }
.bloom-row{
  max-width:var(--maxw); margin:0 auto; padding:0 28px;
  display:flex; align-items:center;
}
.bloom-row.right{ justify-content:flex-end; }
/* About：線を左端から伸ばし、すみれは線の左寄りから生える */
.about-bloom{ position:relative; justify-content:flex-start; margin:130px 0 80px; }
.about-bloom .flower{
  position:absolute; left:36px; top:50%; margin:0;
  transform:translate(-34px, -101%) rotate(5deg);
}
@media (max-width:720px){
  .flower{ height:72px; transform:translateY(-35px) rotate(5deg); margin-left:-46px; }
  .flower-s{ height:60px; transform:translateY(-29px) rotate(-4deg); margin-left:-36px; }
  .bloom-row .flower:first-child{ margin-left:0; }
  .bloom-row .flower + .wavy-line{ margin-left:-46px; }
}
/* 静的な線の帯 */
.weave-strip{
  display:block; width:100%; max-width:var(--maxw);
  height:72px; margin:0 auto; opacity:.9;
}
/* Home：代表作 */
.selected{ display:grid; grid-template-columns:repeat(2,1fr); gap:52px; }
.selected .work{
  position:relative; padding-top:26px;
  display:grid; grid-template-columns:1fr 150px;
  column-gap:26px; align-items:start;
}
/* 直線ではなく手描きの揺らぎ線 */
.selected .work::before{
  content:""; position:absolute; top:0; left:0; right:0; height:12px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 12' preserveAspectRatio='none'%3E%3Cpath d='M2 6 C 18 3.5, 34 8.5, 52 6 S 86 3.5, 104 6 S 138 8.5, 156 6 S 190 4, 208 6 S 242 8, 260 6 S 292 4.5, 298 6' fill='none' stroke='%23d8d2c4' stroke-width='1.5'/%3E%3C/svg%3E") no-repeat;
  background-size:100% 12px;
}
/* 最後の言葉（2つ目）の上の線は消す */
.selected .work:last-child::before{ display:none; }
/* 掌の小説の線から咲くひまわり（位置は要調整） */
.selected .work .work-flower{
  position:absolute; right:-30px; top:0; height:84px; width:auto; margin:0;
  transform:translateY(-95%) rotate(4deg); overflow:visible; z-index:2; pointer-events:none;
}
.selected .work .year,
.selected .work .title,
.selected .work .meta{ grid-column:1; }
/* ポスターは右列。上端をタイトルの下端（＝説明文の上端）に揃える */
.selected .work .poster{ grid-column:2; grid-row:3; }
.selected .work .poster img{ width:100%; display:block; box-shadow:0 2px 14px rgba(43,41,37,.14); }
.selected .work .poster.empty{ display:none; }
.selected .work.no-poster{ display:block; }
.selected .work .year{ font-family:var(--en); font-size:13px; color:var(--sub); letter-spacing:.12em; }
.selected .work .title{
  font-family:var(--serif); font-size:17.5px; font-weight:500;
  letter-spacing:.1em; line-height:1.8; margin:8px 0 10px;
}
.selected .work .meta{ font-size:12px; color:var(--sub); line-height:2.1; }
.selected .work .meta .gap-h{ display:block; height:.8em; }
.more-link{ margin-top:6vh; }
.more-link a{ color:var(--ink); text-decoration:none; font-size:13px; letter-spacing:.18em; border-bottom:1px solid var(--accent); padding-bottom:3px; }
/* Works */
.cat{ margin-bottom:8vh; }
.cat h3{
  font-family:var(--serif); font-weight:500; font-size:15px; letter-spacing:.26em;
  color:var(--sub); margin-bottom:4vh;
  display:flex; align-items:center; gap:18px;
}
.work-row{
  display:grid; grid-template-columns:74px 1fr; gap:22px;
  padding:15px 8px; cursor:default; transition:background .35s;
}
@media (hover:hover){ .work-row:hover{ background:var(--bg2); } }
.work-row > div{ min-width:0; }
.work-row .year{ font-family:var(--en); font-size:14px; color:var(--sub); letter-spacing:.1em; padding-top:2px; }
.work-row .title{ font-family:var(--serif); font-size:16.5px; font-weight:500; letter-spacing:.08em; }
.work-row .credit{ font-size:12px; color:var(--sub); margin-top:2px; letter-spacing:.08em; }
.work-row .note{
  max-height:0; overflow:hidden; opacity:0;
  transition:max-height .5s ease, opacity .5s ease, margin .5s ease;
  font-size:12px; color:var(--sub); line-height:2;
}
.work-row.open .note{ max-height:400px; opacity:1; margin-top:10px; }
@media (hover:hover){ .work-row:hover .note{ max-height:400px; opacity:1; margin-top:10px; } }
.also{
  margin-top:4vh; padding:34px 30px; background:var(--bg2);
  font-size:13px; line-height:2.3; color:var(--sub); letter-spacing:.06em;
}
.also a{ color:var(--ink); text-decoration:none; border-bottom:1px solid var(--accent); }
/* About */
.about-grid{ display:grid; grid-template-columns:300px 1fr; gap:56px; align-items:start; }
.portrait{
  aspect-ratio:3/4; background:var(--bg2);
  display:flex; align-items:center; justify-content:center;
  font-size:11px; color:var(--sub); letter-spacing:.2em;
  overflow:hidden;
}
.portrait img{ width:100%; height:100%; object-fit:cover; display:block; filter:grayscale(1); }
.bio p{ margin-bottom:1.7em; font-size:14px; }
.stmt{
  margin-top:7vh; font-family:"Klee One",var(--serif); font-size:16.5px;
  line-height:2.7; letter-spacing:.08em; max-width:36em;
}
.awards-title{
  font-family:var(--serif); font-weight:500; font-size:15px; letter-spacing:.26em;
  color:var(--sub); margin:52px 0 20px;
  display:flex; align-items:center; gap:18px;
}
.awards{ margin-top:0; list-style:none; font-size:13px; }
.awards li{ font-size:13px; color:var(--sub); line-height:2.5; padding-left:1em; }
.awards li.aw-work{ padding-left:0; color:var(--ink); margin-top:14px; line-height:2.2; }
.awards li.aw-work:first-child{ margin-top:0; }
.sns-line{ margin-top:6vh; display:flex; gap:30px; flex-wrap:wrap; }
.sns-line.sns-under{
  margin-top:18px; display:grid; grid-template-columns:1fr 1fr; gap:10px;
}
.sns-under .sns-item{ text-align:center; }
.sns-under .sns-item a{
  display:block; border:1px solid var(--line); border-radius:99px;
  padding:5px 8px; color:var(--ink);
  font-size:11.5px; letter-spacing:.16em; text-decoration:none;
  transition:border-color .3s, background .3s;
}
.sns-under .sns-item a:hover{ border-color:var(--accent); background:var(--bg2); }
.sns-under .sns-item small{
  display:block; margin-top:6px;
  color:var(--sub); font-size:10px; letter-spacing:.1em;
}
.sns-line a{
  color:var(--ink); text-decoration:none; font-size:12.5px; letter-spacing:.18em;
  border-bottom:1px solid var(--accent); padding-bottom:2px;
}
.sns-line small{ display:block; color:var(--sub); font-size:10.5px; letter-spacing:.08em; margin-top:6px; }
/* Notes */
.notes-lead{ font-size:13px; color:var(--sub); letter-spacing:.1em; margin-bottom:7vh; }
.notes-grid{ display:flex; gap:26px; align-items:flex-start; }
.notes-col{ flex:1; min-width:0; display:flex; flex-direction:column; gap:26px; }
.note-card{
  break-inside:avoid; margin-bottom:0;
  background:var(--bg2); padding:26px 24px;
  font-family:var(--serif); font-size:13.5px; line-height:2.4; letter-spacing:.06em;
}
.nc-photo{ margin:-26px -24px 18px; }
.nc-photo img{ width:100%; display:block; max-height:300px; object-fit:cover; object-position:center 38%; }
.nc-photo.empty{ display:none; }
.nc-date{
  display:block; margin-top:14px;
  font-family:var(--en); font-size:11.5px; color:var(--sub); letter-spacing:.14em;
}
/* Contact */
.contact-lead{ font-size:14px; line-height:2.4; max-width:34em; }
.cform{ max-width:560px; margin-top:4vh; }
.cform label{ display:block; font-size:11.5px; color:var(--sub); letter-spacing:.24em; margin:38px 0 4px; }
.cform select{
  width:100%; background:transparent; border:0; border-bottom:1px solid var(--line);
  font:inherit; font-size:15px; padding:8px 2px; color:var(--ink); outline:none;
  appearance:none; -webkit-appearance:none; border-radius:0; cursor:pointer;
}
.cform input,.cform textarea{
  width:100%; background:transparent; border:0; border-bottom:1px solid var(--line);
  font:inherit; font-size:15px; padding:8px 2px; color:var(--ink); outline:none;
}
.cform input:focus,.cform textarea:focus{ border-bottom-color:var(--accent); }
.cform textarea{ min-height:140px; resize:vertical; }
.cform ::placeholder{ color:var(--sub); opacity:.55; }
.cform button{
  margin-top:48px; background:transparent; border:1px solid var(--ink); color:var(--ink);
  padding:13px 48px; letter-spacing:.3em; font-size:12.5px; cursor:pointer; transition:.3s;
}
.cform button:hover{ background:var(--ink); color:var(--bg); }
.form-note{ margin-top:26px; font-size:11px; color:var(--sub); letter-spacing:.06em; }
/* EN */
.en-body p{ max-width:38em; font-size:14.5px; line-height:2.3; margin-bottom:1.8em; }
.en-list{ list-style:none; margin-top:4vh; }
.en-list li{ font-size:13.5px; line-height:2.6; color:var(--sub); }
.en-list b{ color:var(--ink); font-weight:400; }
/* フッター */
footer{
  max-width:var(--maxw); margin:0 auto; padding:8vh 28px 7vh;
  display:flex; justify-content:space-between; align-items:flex-end; flex-wrap:wrap; gap:20px;
}
footer .sns{ display:flex; gap:24px; }
footer a{ color:var(--sub); text-decoration:none; font-size:12px; letter-spacing:.16em; transition:color .3s; }
footer a:hover{ color:var(--ink); }
footer .copy{ font-family:var(--en); font-size:11px; color:var(--sub); letter-spacing:.1em; }
/* フェード */
.fade{ opacity:0; transform:translateY(14px); transition:opacity 1s ease, transform 1s ease; }
.fade.in{ opacity:1; transform:none; }
/* ===== スマホ調整 ===== */
@media (max-width:720px){
  header{ flex-direction:column; gap:14px; padding:30px 20px 0; }
  nav{ gap:16px; } nav a{ font-size:11px; letter-spacing:.08em; }
  section{ padding:7vh 20px; }
  .hr-wrap,.bloom-row{ padding:0 20px; }
  footer{ padding:8vh 20px 6vh; }
  h2{ font-size:21px; margin-bottom:5vh; }
  /* Home */
  .hero{ padding:0 20px; min-height:86vh; min-height:86svh; }
  .intro{ padding-top:9vh; padding-bottom:9vh; }
  .statement{ font-size:13.5px; line-height:2.3; letter-spacing:.06em; }
  .selected{ grid-template-columns:1fr; gap:34px; }
  .selected .work{ display:block; }
  .selected .work .poster{ width:min(230px, 62%); margin:6px 0 16px; }
  .selected .work .meta{ font-size:12.5px; line-height:2.2; }
  /* Works */
  h3 .flower-s{ margin-left:-44px; }
  h2 .flower-s{ margin-left:-48px; }
  .work-row{ grid-template-columns:58px 1fr; gap:14px; position:relative; padding-right:34px; }
  .work-row:has(.note)::after{
    content:"＋"; position:absolute; right:10px; top:19px;
    color:var(--sub); font-size:10.5px; font-weight:300; opacity:.75;
  }
  .work-row.open:has(.note)::after{ content:"−"; }
  .also{ padding:26px 20px; }
  /* Profile：スマホは 名前→写真→SNS→経歴→映画祭 の順 */
  .about-grid{ display:flex; flex-direction:column; gap:0; }
  .about-grid > div{ display:contents; }
  .an-ja{ order:1; }
  .an-en{ order:2; }
  .portrait{ order:3; width:min(220px,64%); }
  .sns-line.sns-under{ order:4; width:min(220px,64%); gap:8px; }
  .sns-under .sns-item a{ padding:4px 6px; font-size:10.5px; letter-spacing:.12em; }
  .sns-under .sns-item small{ font-size:9.5px; margin-top:5px; }
  .bio{ order:5; margin-top:44px; }
  .awards-title{ order:6; }
  .awards{ order:7; }
  .about-bloom{ margin:80px 0 54px; }
  .about-bloom .flower{ left:44px; }
  /* Notes */
  /* Notes: 列数はJSで制御（スマホ=1列・PC=3列） */
  /* 仮UI */
  .shape-switch{ padding:5px 8px; gap:4px; }
  .shape-switch button{ padding:4px 9px; font-size:10px; }
}

/* 仮UI：形の確認用（本番では削除） */
.shape-switch{
  position:fixed; bottom:14px; right:14px; z-index:1000;
  display:flex; gap:6px; align-items:center;
  background:rgba(127,127,127,.14); backdrop-filter:blur(8px);
  padding:7px 10px; border-radius:99px; border:1px solid var(--line);
}
.shape-switch span{ font-size:10px; color:var(--sub); margin-right:2px; }
.shape-switch button{
  font-family:var(--sans); font-size:11px; letter-spacing:.06em;
  padding:5px 12px; border-radius:99px; cursor:pointer;
  border:1px solid var(--line); background:transparent; color:var(--sub); transition:all .3s;
}
.shape-switch button.active{ background:var(--ink); color:var(--bg); border-color:var(--ink); }

/* 言語切替 */
body[data-lang="ja"] .en-only{ display:none !important; }
body[data-lang="en"] .ja-only{ display:none !important; }
.lang-toggle{
  background:none; border:1px solid var(--line); border-radius:99px;
  padding:4px 14px; color:var(--sub); font-size:11px; letter-spacing:.14em;
  cursor:pointer; font-family:var(--sans); transition:.3s;
}
.lang-toggle:hover{ color:var(--ink); border-color:var(--accent); }
/* About：名前ブロック */
.an-ja{ font-family:var(--serif); font-weight:500; font-size:24px; letter-spacing:.3em; }
.an-en{ font-size:11px; color:var(--sub); letter-spacing:.28em; margin-top:2px; margin-bottom:24px; }
.an-sns{ display:flex; gap:16px; margin:20px 0 40px; }
.an-sns a{ color:var(--sub); transition:color .3s; display:inline-flex; }
.an-sns a:hover{ color:var(--ink); }
/* 出演者名：名前の途中で改行しない */
.nb{ white-space:nowrap; }
/* 配信リンク */
.stream{ display:inline-flex; gap:8px; margin-top:6px; flex-wrap:wrap; }
.stream a{
  font-size:10.5px; letter-spacing:.08em; color:var(--sub);
  border:1px solid var(--line); border-radius:99px; padding:2px 14px;
  text-decoration:none; transition:.3s;
}
.stream a:hover{ color:var(--ink); border-color:var(--accent); }
/* About：ステートメント横の野原 */
.meadow{ width:250px; flex:0 0 auto; margin-bottom:8px; }
@media (max-width:720px){ .meadow{ width:200px; } }

/* JP/EN：選択中を濃く、非選択をグレーに */
.lang-toggle{ display:flex; gap:8px; align-items:baseline; border:0; padding:4px 0; }
.lang-toggle:hover{ border:0; }
.lang-toggle b{ font-weight:300; transition:color .3s; }
.lang-toggle i{ font-style:normal; color:var(--line); }
body[data-lang="ja"] .lang-toggle b[data-l="ja"]{ color:var(--ink); }
body[data-lang="ja"] .lang-toggle b[data-l="en"]{ color:var(--line); }
body[data-lang="en"] .lang-toggle b[data-l="en"]{ color:var(--ink); }
body[data-lang="en"] .lang-toggle b[data-l="ja"]{ color:var(--line); }
/* About：ステートメントの右に写真。重ならないぎりぎりの大きさで、上下を文と揃える */
.stmt-wrap{ margin-top:0; padding:36px 24px 12px; text-align:center; }
.stmt-wrap .stmt{
  margin:0 auto; max-width:none;
  font-size:20px; line-height:2.4;
}
.stmt-wrap .stmt + .stmt{ margin-top:1.8em; }
.stmt br.m, .statement br.m{ display:none; } /* スマホ専用の句読点改行（PCでは非表示） */
/* Home：短いステートメントの下に写真 */
.intro-grid{ display:block; }
.intro-photo{ margin-top:44px; width:min(420px, 60%); }
.intro-photo img{ width:100%; height:auto; display:block; }
@media (max-width:720px){
  .intro-photo{ width:100%; margin-top:32px; }
  /* ステートメント類：スマホは句読点改行＋少し小さめ（基底ルールより後に置くこと） */
  .stmt br.m, .statement br.m{ display:inline; }
  .stmt-wrap{ padding:8px 0 0; }
  .stmt-wrap .stmt{ font-size:15px; line-height:2.5; }
}

/* 上に戻るボタン（全ページ・スクロール中に表示） */
.to-top{
  position:fixed; right:22px; bottom:22px; z-index:50;
  width:42px; height:42px; border-radius:99px;
  background:var(--bg2); border:1px solid var(--line); color:var(--sub);
  font-family:var(--en); font-size:15px; line-height:1; cursor:pointer;
  opacity:0; pointer-events:none; transition:opacity .4s ease, color .3s, border-color .3s;
}
.to-top.show{ opacity:.92; pointer-events:auto; }
.to-top:hover{ color:var(--ink); border-color:var(--accent); }
@media (max-width:720px){ .to-top{ right:16px; bottom:16px; width:40px; height:40px; } }