/* ============================================================
   TED SHARKS — 下層ページ共通デザイン（海トンマナ・静的背景）
   ============================================================ */
:root{
  --bg:#04131e; --bg2:#0a2433; --bg3:#0e3145;
  --ink:#eaf4f7; --dim:rgba(234,244,247,.62); --faint:rgba(234,244,247,.34);
  --cyan:#7fd8ff; --line:rgba(234,244,247,.13);
  --sans:"Zen Kaku Gothic New",system-ui,sans-serif;
  --serif:"Shippori Mincho",serif;
  --mono:"Share Tech Mono",monospace;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--ink);font-family:var(--sans);line-height:1.85;-webkit-font-smoothing:antialiased}
a{color:inherit}
::selection{background:var(--cyan);color:#04131e}
img{max-width:100%}

/* 静的な深海背景（動かない） */
.page-bg{position:fixed;inset:0;z-index:-1;
  background:radial-gradient(120% 80% at 50% -10%,#0c4f70 0%,#062f44 32%,#04202f 60%,#02101a 100%);}
.page-bg::after{content:"";position:absolute;inset:0;
  background:linear-gradient(115deg,rgba(140,215,255,.06) 0 8%,transparent 8% 30%,rgba(140,215,255,.05) 30% 36%,transparent 36%);}

/* ヘッダー */
.hdr{position:sticky;top:0;z-index:40;display:flex;align-items:center;justify-content:space-between;
  padding:14px 22px;background:linear-gradient(180deg,rgba(4,19,30,.92),rgba(4,19,30,.4) 70%,transparent);
  backdrop-filter:blur(3px)}
.hdr-left{display:flex;gap:18px;align-items:center;flex-wrap:wrap}
.hdr .home{font-family:var(--mono);font-size:12px;letter-spacing:2px;color:var(--dim);text-decoration:none;transition:.25s}
.hdr .home:hover{color:var(--cyan)}
.hdr .home.parent{color:var(--cyan)}
.hdr .home.parent:hover{color:#fff}

/* 動画ポスター（ローカルプレビュー用：クリックでYouTube/Vimeoが開く） */
.vidlink{position:relative;display:flex;align-items:center;justify-content:center;aspect-ratio:16/9;margin-top:20px;
  border-radius:8px;border:1px solid var(--line);background:#06202e center/cover no-repeat;text-decoration:none;overflow:hidden}
.vidlink::after{content:"";position:absolute;inset:0;background:rgba(2,12,20,.4)}
.vidlink.novid{background:linear-gradient(180deg,#0c5476,#04293d)}
.vidlink .play{position:relative;z-index:2;width:64px;height:64px;border-radius:50%;border:2px solid #fff;display:flex;align-items:center;justify-content:center;transition:.25s}
.vidlink:hover .play{background:rgba(255,255,255,.15);transform:scale(1.06)}
.vidlink .play::after{content:"";border-left:20px solid #fff;border-top:12px solid transparent;border-bottom:12px solid transparent;margin-left:5px}
.vidlink .vidnote{position:absolute;z-index:2;bottom:10px;right:12px;font-family:var(--mono);font-size:12px;letter-spacing:1px;color:#fff;text-shadow:0 1px 4px #000}
.lang{font-family:var(--mono);font-size:11px;letter-spacing:1px;display:flex;border:1px solid rgba(255,255,255,.3);
  border-radius:18px;overflow:hidden;cursor:pointer;user-select:none}
.lang span{padding:5px 11px}
.lang .on{background:rgba(255,255,255,.9);color:#04293d}

/* バナー（そのセクションのサメ・静止） */
.banner{position:relative;min-height:42vh;display:flex;align-items:flex-end;overflow:hidden;
  background:linear-gradient(180deg,#0c5476 0%,#073f5b 45%,#04222f 100%);
  border-bottom:1px solid var(--line)}
.banner .shark{position:absolute;right:-2%;top:50%;transform:translateY(-50%);height:78%;
  filter:drop-shadow(0 22px 30px rgba(0,0,0,.5));pointer-events:none}
.banner .btxt{position:relative;z-index:2;padding:34px 26px 30px;max-width:70%}
.banner .kicker{font-family:var(--mono);font-size:12px;letter-spacing:4px;color:var(--cyan);margin-bottom:8px}
.banner h1{font-family:var(--serif);font-weight:700;font-size:clamp(30px,6vw,64px);line-height:1.05}
.banner .en{font-family:var(--mono);letter-spacing:3px;color:var(--dim);margin-top:8px;font-size:clamp(12px,1.5vw,16px)}
.banner .sub{margin-top:14px;color:var(--dim);font-family:var(--serif);font-size:clamp(13px,1.7vw,17px)}

/* 本文 */
.wrap{max-width:1000px;margin:0 auto;padding:54px 22px 90px}
.lead{font-family:var(--serif);font-size:clamp(15px,2vw,19px);color:var(--dim);margin-bottom:40px;line-height:2}
.soon{font-family:var(--serif);font-size:clamp(18px,2.6vw,24px);text-align:center;color:var(--dim);padding:60px 0 14px}
.soon-note{text-align:center;color:var(--faint);font-size:13px;padding-bottom:60px}

/* 長編トップ：作品一覧 */
.company{font-family:var(--mono);font-size:12px;letter-spacing:3px;color:var(--cyan);
  border:1px solid var(--line);border-radius:4px;padding:8px 14px;display:inline-block;margin-bottom:34px}
.worklist{display:flex;flex-direction:column;gap:0}
.work-row{display:grid;grid-template-columns:200px 1fr;gap:24px;align-items:center;
  border-top:1px solid var(--line);padding:24px 6px;text-decoration:none;transition:background .3s,padding-left .3s}
.work-row:last-child{border-bottom:1px solid var(--line)}
.work-row:hover{background:rgba(127,216,255,.05);padding-left:16px}
.work-row .thumb{aspect-ratio:16/9;background:#06202e center/cover no-repeat;border:1px solid var(--line);border-radius:6px;
  display:flex;align-items:center;justify-content:center;color:var(--faint);font-family:var(--mono);font-size:11px}
.work-row h3{font-family:var(--serif);font-weight:700;font-size:clamp(20px,3vw,28px)}
.work-row .yr{font-family:var(--mono);font-size:12px;color:var(--cyan);letter-spacing:2px;margin:6px 0 8px}
.work-row p{color:var(--dim);font-size:14px;line-height:1.85}
.work-row .go{font-family:var(--mono);font-size:11px;color:var(--faint);letter-spacing:2px;margin-top:10px}
@media(max-width:620px){.work-row{grid-template-columns:1fr}}

/* 作品ページ：項目ナビ＋セクション */
.work-nav{position:sticky;top:52px;z-index:30;display:flex;flex-wrap:wrap;gap:8px;
  padding:12px 0;margin-bottom:30px;background:linear-gradient(180deg,rgba(4,19,30,.96),rgba(4,19,30,.6));
  border-bottom:1px solid var(--line)}
.work-nav a{font-family:var(--mono);font-size:12px;letter-spacing:1px;color:var(--dim);text-decoration:none;
  border:1px solid var(--line);border-radius:18px;padding:6px 14px;transition:.25s}
.work-nav a:hover,.work-nav a.active{background:var(--cyan);color:#04222f;border-color:var(--cyan)}
.sec{padding:34px 0;border-top:1px solid var(--line);scroll-margin-top:110px}
.sec:first-of-type{border-top:none}
.sec h2{font-family:var(--serif);font-weight:700;font-size:clamp(22px,3.4vw,32px);margin-bottom:4px}
.sec .en-h{font-family:var(--mono);font-size:12px;letter-spacing:3px;color:var(--cyan);margin-bottom:18px}
.sec .body{white-space:pre-line;color:var(--ink);font-size:15px;line-height:2}
.sec .media{margin-top:22px}
.sec .media img{border-radius:8px;border:1px solid var(--line);display:block}

/* 動画埋め込み（レスポンシブ16:9） */
.video{position:relative;padding-top:56.25%;border-radius:8px;overflow:hidden;border:1px solid var(--line);background:#000;margin-top:20px}
.video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

/* 短編：作品ブロック */
.film{border-top:1px solid var(--line);padding:46px 0}
.film:first-of-type{border-top:none}
.film h3{font-family:var(--serif);font-weight:700;font-size:clamp(22px,3.4vw,30px)}
.film .yr{font-family:var(--mono);font-size:12px;letter-spacing:2px;color:var(--cyan);margin:6px 0 16px}
.film .desc{color:var(--dim);font-size:15px;line-height:2;margin-bottom:6px}
.film .awards{margin-top:18px;font-size:13px;color:var(--dim);white-space:pre-line;
  border-left:2px solid var(--cyan);padding:4px 0 4px 14px}
.film .awards .lbl{font-family:var(--mono);font-size:11px;letter-spacing:2px;color:var(--cyan);display:block;margin-bottom:4px}
.film .imdb{display:inline-block;margin-top:16px;font-family:var(--mono);font-size:12px;letter-spacing:1px;
  color:var(--cyan);text-decoration:none;border:1px solid var(--line);border-radius:4px;padding:7px 14px;transition:.25s}
.film .imdb:hover{background:var(--cyan);color:#04222f}
.film .credits{margin-top:16px;font-size:14px;color:var(--dim)}
.film .credits .lbl{font-family:var(--mono);font-size:11px;letter-spacing:2px;color:var(--cyan);margin-right:10px}

/* バンドページ：小見出し・楽曲 */
.subhead{font-family:var(--mono);font-size:12px;letter-spacing:3px;color:var(--cyan);
  margin:40px 0 18px;border-bottom:1px solid var(--line);padding-bottom:8px}
.song{border-top:1px solid var(--line);padding:18px 2px}
.song:first-of-type{border-top:none}
.song h4{font-family:var(--serif);font-weight:700;font-size:18px}
.song .role{font-family:var(--mono);font-size:11px;color:var(--cyan);letter-spacing:2px;margin:5px 0 6px}
.song .imdb{display:inline-block;font-family:var(--mono);font-size:12px;letter-spacing:1px;color:var(--cyan);
  text-decoration:none;border:1px solid var(--line);border-radius:4px;padding:7px 14px;transition:.25s}
.song .imdb:hover{background:var(--cyan);color:#04222f}

/* CM：サムネ → 拡大 */
.cmgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:18px}
.cm-card{background:var(--bg2);border:1px solid var(--line);border-radius:8px;overflow:hidden;cursor:pointer;transition:transform .3s,border-color .3s}
.cm-card:hover{transform:translateY(-4px);border-color:rgba(127,216,255,.5)}
.cm-card .thumb{aspect-ratio:16/9;background:#06202e center/cover no-repeat;border-bottom:1px solid var(--line)}
.cm-card .b{padding:14px 16px}
.cm-card .cl{font-family:var(--mono);font-size:11px;color:var(--cyan);letter-spacing:2px}
.cm-card h3{font-family:var(--serif);font-weight:700;font-size:17px;margin:4px 0}
.cm-card p{font-size:13px;color:var(--dim);line-height:1.8}
.modal{position:fixed;inset:0;z-index:90;background:rgba(2,12,20,.9);display:none;align-items:center;justify-content:center;padding:24px;flex-direction:column;gap:16px}
.modal.show{display:flex}
.modal img{max-width:90%;max-height:70vh;border-radius:8px;border:1px solid var(--line)}
.modal .cap{font-family:var(--mono);font-size:13px;letter-spacing:1px;color:var(--cyan)}
.modal .close{position:absolute;top:18px;right:22px;font-size:26px;color:#fff;cursor:pointer;line-height:1}

/* 音楽：バンド一覧 */
.bandgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:20px}
.band-card{background:var(--bg2);border:1px solid var(--line);border-radius:8px;overflow:hidden;text-decoration:none;transition:transform .3s,border-color .3s}
.band-card:hover{transform:translateY(-4px);border-color:rgba(127,216,255,.5)}
.band-card .ph{aspect-ratio:16/10;background:#06202e center/cover no-repeat;border-bottom:1px solid var(--line)}
.band-card .b{padding:16px}
.band-card h3{font-family:var(--serif);font-weight:700;font-size:20px}
.band-card .concept{color:var(--dim);font-size:14px;margin-top:8px;line-height:1.85}

/* メンバー */
.members{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:18px}
.member{background:var(--bg2);border:1px solid var(--line);border-radius:8px;overflow:hidden}
.member .ph{aspect-ratio:3/4;background:#06202e center/cover no-repeat;border-bottom:1px solid var(--line)}
.member .b{padding:14px}
.member h4{font-family:var(--serif);font-weight:700;font-size:17px}
.member .role{font-family:var(--mono);font-size:11px;color:var(--cyan);letter-spacing:2px;margin:5px 0}
.member p{font-size:13px;color:var(--dim);line-height:1.8}

/* NEWS */
.news-item{border-top:1px solid var(--line);padding:24px 6px;display:grid;grid-template-columns:120px 1fr;gap:18px}
.news-item:last-child{border-bottom:1px solid var(--line)}
.news-item .date{font-family:var(--mono);font-size:12px;color:var(--cyan);letter-spacing:1px}
.news-item h3{font-family:var(--serif);font-weight:700;font-size:18px;margin-bottom:6px}
.news-item p{color:var(--dim);font-size:14px;white-space:pre-line}
@media(max-width:560px){.news-item{grid-template-columns:1fr}}

/* CONTACT */
.contact-box{max-width:680px;margin:0 auto;text-align:center}
.contact-box h2{font-family:var(--serif);font-weight:700;font-size:clamp(24px,4vw,38px);margin-bottom:16px}
.contact-box .lead{font-family:var(--serif);color:var(--dim)}
.contact-box .accept{font-size:14px;color:var(--dim);margin:6px 0 30px}
.btn{display:inline-block;font-family:var(--mono);letter-spacing:2px;font-size:14px;color:var(--ink);
  text-decoration:none;border:1px solid var(--cyan);padding:15px 32px;border-radius:4px;transition:.3s}
.btn:hover{background:var(--cyan);color:#04222f}
.reply{font-family:var(--mono);font-size:12px;color:var(--faint);letter-spacing:1px;margin-top:18px}

/* フッター */
.ft{border-top:1px solid var(--line);padding:36px 22px;text-align:center}
.ft .links{display:flex;gap:22px;justify-content:center;flex-wrap:wrap;margin-bottom:14px}
.ft a{font-family:var(--mono);font-size:12px;letter-spacing:1px;color:var(--dim);text-decoration:none;transition:.25s}
.ft a:hover{color:var(--cyan)}
.ft .cp{font-family:var(--mono);font-size:11px;color:var(--faint);letter-spacing:2px}

/* 言語表示制御 */
body.en .jp-only{display:none}
body:not(.en) .en-only{display:none}


/* ===== CM：クライアント・ロゴウォール（プレステージ仕様 / 白背景なし） ===== */
.cmgrid.logowall{display:grid;grid-template-columns:repeat(3,1fr);gap:0;
  border-top:1px solid var(--line);border-left:1px solid var(--line);border-radius:8px;overflow:hidden;
  background:linear-gradient(180deg,rgba(12,46,66,.34),rgba(4,19,30,.10))}
.logo-cell{position:relative;display:flex;align-items:center;justify-content:center;
  min-height:160px;padding:34px 22px;border-right:1px solid var(--line);border-bottom:1px solid var(--line);
  transition:background .45s ease;overflow:hidden}
.logo-cell:hover{background:rgba(127,216,255,.05)}
.logo-cell .logo{max-height:56px;max-width:80%;object-fit:contain;
  filter:brightness(0) invert(1);opacity:.72;
  transition:opacity .45s ease,transform .45s ease,filter .45s ease}
.logo-cell:hover .logo{filter:none;opacity:1;transform:translateY(-7px) scale(1.05)}
.logo-cell .logo.is-fav{filter:none;opacity:.96;max-height:44px;border-radius:6px}
.logo-cell:hover .logo.is-fav{opacity:1;transform:translateY(-7px) scale(1.05)}
.logo-cell .markname{display:none;font-family:var(--serif);font-weight:700;
  font-size:clamp(18px,2.5vw,26px);letter-spacing:1px;color:#eaf4f7;text-align:center;
  transition:transform .45s ease,opacity .45s ease;opacity:.9}
.logo-cell.no-logo .markname,.logo-cell.logo-failed .markname{display:block}
.logo-cell:hover .markname{opacity:1;transform:translateY(-7px)}
.logo-cell .cap{position:absolute;left:0;right:0;bottom:15px;text-align:center;padding:0 10px;
  opacity:0;transform:translateY(8px);transition:opacity .45s ease,transform .45s ease;pointer-events:none}
.logo-cell:hover .cap{opacity:1;transform:translateY(0)}
.logo-cell .cap .cn{display:block;font-family:var(--mono);font-size:10px;letter-spacing:3px;color:var(--cyan);text-transform:uppercase}
.logo-cell .cap .cr{display:block;font-family:var(--mono);font-size:9px;letter-spacing:2px;color:var(--faint);margin-top:3px}
.cm-note{margin-top:24px;text-align:center;font-family:var(--mono);font-size:10px;letter-spacing:1px;color:var(--faint);line-height:1.8}
@media(max-width:680px){.cmgrid.logowall{grid-template-columns:repeat(2,1fr)}.logo-cell{min-height:128px;padding:26px 16px}}