/* =========================
   Base / Links / Vars
========================= */

/* 文字色継承リンク＋下線なし（共通） */
a, a:visited { color: inherit; text-decoration: none; }
a:hover { opacity: .75; }
a:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
  
/* iOSのタップ反応を消す（必要な要素に広く適用） */
a, button, [role="button"], #overviewGrid a, .ov-rightlinks, .ov-rightlinks * {
  -webkit-tap-highlight-color: transparent;
}
a:active, button:active, .ov-cat:active { background: transparent !important; }

/* 変数 */
*{ box-sizing:border-box }
html,body{ height:100%; margin:0 }
:root{
  --bar-h: 80px;
  --bar-extra: 0px;
  --gutter: 80px;
  --cap-col-w: 420px;

  --fs-top:   12px;
  --fs-title: 10px;
  --fs-sub:   10px;

  --topbar-leading: 1.1;
  --topbar-pad: 10px;

  --ov-ratio: 16/9;
}



body{
  font-family: system-ui, -apple-system, "Helvetica Neue", Arial, "Noto Sans JP", sans-serif;
  color:#111;
  overflow-x:hidden;
  padding-top: calc(var(--bar-h) + var(--bar-extra)); /* 固定ヘッダーぶん下げる */
}

/* =========================
   Top bar
========================= */
.topbar{
  position: fixed; top:0; left:0; right:0;
  z-index:50;
  display:grid; grid-template-columns:1fr auto; column-gap:16px;
  align-items:flex-start;
  min-height:var(--bar-h);
  padding:0 var(--gutter);
}

/* 右上テキスト群 */
.topbar-right{ display:inline-flex; gap:6px; align-items:baseline; justify-self:end }




/* カウンターとリンクの見た目 */
.counter, .link, .link-btn{
  font-size: var(--fs-top);
  line-height: var(--topbar-leading);
  padding-top: var(--topbar-pad);
  margin: 0;
}

.topbar a,
.topbar a:link,
.topbar a:visited,
.topbar a:hover,
.topbar a:active { color: inherit !important; text-decoration: none; font-size: 12px; font-weight: 600;}

/* ボタンをテキスト風に */
.link-btn{
  background:none; border:0; cursor:pointer; font: inherit; display:inline; font-size: 12px; font-weight: 600; 
}

/* =========================
   Stage / Viewer
========================= */
/* =========================
   Stage / Viewer（元の安定仕様）
========================= */
.stage{
  position: relative;
  width: min(1400px, 100%);
  margin: 0 auto;
  height: calc(100dvh - var(--bar-h));        /* ← ビューポート高からヘッダー分を引く */
  padding: 0 var(--gutter);
  display: flex;
  justify-content: center;
  align-items: center;                         /* ← 等比の #hero を中央に配置 */
}
.viewer{
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

#viewer { touch-action: pan-y; }

#hero{
  display: block;
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  user-select: none;
  -webkit-user-drag: none;
  margin-bottom: var(--gutter);
}


/* PC左の固定キャプション */
.caption-desktop{
  position:fixed; left:var(--gutter); top:50%; transform:translateY(-50%);
  width:var(--cap-col-w); z-index:10; pointer-events:none;
}
.caption-desktop .ttl{  margin:0 0 1px; font-size: 14px; font-weight:600 }
.caption-desktop .sub{ line-height:1.2; margin:0; font-size: 12px; font-weight: 500;}

/* モバイル用キャプション（PC非表示） */
.caption-mobile{ display:none; margin-top:-6px; position:relative; z-index:10 }
.caption-mobile p{ margin:0 }
.caption-mobile .ttl{ font-size:10px ; margin:15px 0 2px; font-weight:700; line-height:1.3 }
.caption-mobile .sub{ font-size:10px; line-height:1.3; font-weight:500 }

/* 画面左右のクリック領域（前後移動） */
.navHit{
  position:fixed;
  top: calc(var(--bar-h) + var(--bar-extra));
  height: calc(100dvh - var(--bar-h) - var(--bar-extra));
  width:50vw;
  border:0; padding:0; background:transparent;
  z-index:9; cursor:pointer; touch-action:manipulation;
}
.navPrev{ left:0 } .navNext{ left:50vw }

/* =========================
   Responsive
========================= */
/* === iPhone SE（幅375px以下）だけフォント小さく（最優先上書き） === */
@media (max-width: 380px){
  .caption-mobile .ttl{ font-size: 14px !important; } /* タイトル */
  .caption-mobile .sub{ font-size: 8px !important; } /* サブ */

  /* 右上の小さな文字群（OVERVIEW含む） */
  .topbar a:active { font-weight: 600; font-size: 9px; gap:3px;}
}

/* iPhone (幅393px) 用 */
@media (width: 393px) and (orientation: portrait) {
  .caption-mobile .ttl{ font-size: 12px !important; } /* タイトル */
  .caption-mobile .sub{ font-size: 9px !important; } /* サブ */

  /* 右上の小さな文字群（OVERVIEW含む） */
  .topbar a:active { font-weight: 600; font-size: 10px; gap:3px;}
}

/* iPhone Pro (幅402px) 用 */
@media (width: 402px) and (orientation: portrait) {
   .caption-mobile .ttl{ font-size: 16px !important; } /* タイトル */
  .caption-mobile .sub{ font-size: 10px !important; } /* サブ */

  /* 右上の小さな文字群（OVERVIEW含む） */
  .topbar a:active { font-weight: 600; font-size: 10px; gap:3px;}
}


/* SP（〜767px） */
@media (max-width:767px){
  :root{
    --bar-extra: 10px; --gutter: 12px;
  }
  .caption-desktop{ display:none }
  .caption-mobile{ display:block ;}
  .caption-mobile .ttl{ font-weight: 600; font-size: 18px;}
  .caption-mobile .sub { font-weight: 500; font-size: 10px;}
  .topbar-right,.counter, 
  .link, 
  .link-btn, 
  .topbar a, 
  .topbar a:link, 
  .topbar a:visited, 
  .topbar a:hover, 
  .topbar a:active { font-weight: 600; font-size: 10px; gap:3px;}
  .stage{ display:block; height:auto; padding:0 var(--gutter) }
  .viewer{ display:flex; justify-content:center; align-items:center; width:100%; margin:12px auto 0 }
  #hero{
    margin-left:auto; margin-right:auto;
    max-height: calc(100svh - var(--bar-h) - var(--bar-extra) - 8px);
    max-width:  calc(100dvw - 2 * var(--gutter));
  }
}

/* Tablet（768〜1100px） */
@media (min-width:768px) and (max-width:1199px){
  .caption-desktop{ display:none }
  .caption-mobile{ display:block }
  .caption-mobile .ttl {font-weight: 600; font-size: 16px; }
  .caption-mobile .sub {font-weight: 500; font-size: 10px; } 
  .stage{ display:block; height:auto; padding:0 var(--gutter) }
  .viewer{ display:flex; justify-content:center; align-items:center; width:100%; height:auto;   margin-bottom:var(--gutter);}
  #hero{
    margin-left:auto; margin-right:auto;
    max-height: calc(100dvh - var(--bar-h) - var(--bar-extra) - 8px);
    max-width: calc(100vw - 2*var(--gutter));
  }
}





/* =========================
   OVERVIEW overlay
========================= */
#overviewPanel{
  position:fixed; inset:0; z-index:100;
  background:#ffffff;
  overflow:auto; display:none;
}
#overviewPanel.is-open{ display:block }

/* ヘッダー：右上リンクは重ねて配置、行自体は高さを取らない */
.ov-header{ position:sticky; top:0; z-index:2; background:inherit; padding:6px }


.ov-rightlinks{ display:flex;}
#overviewPanel .ov-link{ color:inherit; text-decoration:none; font-weight:600; font-size:14px }

.ov-artist{ margin:0 0 2px; font-size:22px; line-height:1; font-weight:600 }
.ov-role{ font-size:14px; font-weight: 600;  letter-spacing:.04em; margin-bottom:8px; }

/* デスクトップ用キャプションの役職 */
#captionDesktop .ttl .role {
  font-size: 0.75em;  /* 本文の 75% の大きさ */
  font-weight: 600;   /* 細字にするなら */
  letter-spacing: 0.05em;
  display: block;     /* 改行を確実に */
  
}

/* モバイル用キャプションの役職 */
#captionMobile .ttl .role {
  font-size: 0.85em;
  font-weight: 400;
}



.ov-categories{ display:flex; gap:8px; padding:4px 0 2px }
.ov-cat{ appearance:none; background:none; border:0; cursor:pointer; font:inherit; font-size: 14px;  font-weight: 600; color:inherit; padding:2px 0; letter-spacing:.05em }
.ov-cat.is-active{ font-weight:600 ; font-size: 14px;}

/* Overview グリッド */
.jg-grid{ margin-top:12px; transition:opacity .08s ease }
.jg-grid a{ overflow:hidden }
.jg-grid.is-layingout{ opacity:0; pointer-events:none }


@media (hover:hover) and (pointer:fine){
  .jg-grid a img{ transition:none !important; will-change:auto }
  .jg-grid.is-group-hover a.is-in-group > img{ opacity:.35 !important; transform:none }
}




/* タイルを基準にオーバーレイ配置できるように */


/* group を擬似要素で読む：通常は非表示 */
/*#overviewGrid a.jg-entry::after{
  content: attr(data-group);          
  position: absolute;
  left: 3px; right: 8px; top: 3px;    
  opacity: 0; transform: translateY(-2px);
  transition: opacity .18s ease, transform .18s ease;

  font-size: 10px; font-weight: 400; line-height: 1.3;
  color: #000000;
  white-space: normal;                 
  word-break: break-word;
  overflow-wrap: anywhere;             
  pointer-events: none;                
} */

/* ホバーできる環境：表示＆拡大 */
/*@media (hover:hover) and (pointer:fine){
  #overviewGrid a.jg-entry:hover::after,
  #overviewGrid.jg-grid.is-group-hover a.is-in-group::after{
    opacity: 1; transform: none;
    font-size: 12px;                   
    line-height: 1.4;
  }
}*/













/* 浮遊キャプション（プロジェクト名）overview gallery */
#ovPhotos{ position:relative; /*padding-top:30px*/ }


/* SP時のOverview微調整 */
@media (max-width:767px){
  .ov-header{ padding:max(6px, env(safe-area-inset-top)) var(--gutter) 6px }
  .ov-categories{ gap:6px; padding:2px 0 0 }
  .ov-link{ font-size:12px; font-weight:500; letter-spacing:.02em }
}








/* =========================
   VIDEO grid
========================= */

.ov-video-grid{
  display:grid;
  grid-template-columns:1fr;
  max-width:600px;
  margin:0 auto;
  gap:clamp(8px,1.2vw,14px);
  padding:0 min(2vw,16px) 20px;
  padding-top: 20px;
  justify-items: center; 
}


.ov-video{ margin:0; }
.ov-video-frame{
  position:relative; aspect-ratio:var(--ov-ratio);
  overflow:hidden;  width: min(92vw, 400px); 
}
.ov-video-frame > .ov-video-el{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:center; display:block;
}

/* overlay caption */
.ov-video{ position:relative; }
.ov-video-frame::before{
  content:""; position:absolute; inset:0; background:#fff;
  opacity:0; transition:opacity .18s ease; pointer-events:none; z-index:1;
}
.ov-video-cap{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  text-align:center; padding:12px; color:#111;
  opacity:0; transition:opacity .18s ease; pointer-events:none; background:none; z-index:2;
}
.ov-cap-title{ font-weight:700; font-size:clamp(12px,.95vw,18px); letter-spacing:.02em }
.ov-cap-meta { margin-top:6px; font-size:clamp(11px,.8vw,14px); opacity:.9 }

@media (hover:hover) and (pointer:fine){
  .ov-video:hover .ov-video-frame::before{ opacity:.50; }
  .ov-video:hover .ov-video-cap{ opacity:1; }
}
.ov-video:focus-within .ov-video-frame::before{ opacity:.35; }
.ov-video:focus-within .ov-video-cap{ opacity:1; }
@media (hover:none){
  .ov-video-frame::before{ opacity:.22; }
  .ov-video-cap{ opacity:1; }
}

/* 全画面ボタン */
.ov-video-frame{ position:relative; }

.ov-video:hover .ov-fs-btn{ opacity:1; transform:none; }
@media (hover:none){ .ov-fs-btn{ opacity:1; transform:none; } }


/* デフォルトは横長（16:9）想定のまま */
.ov-video.is-landscape .ov-video-frame { aspect-ratio: 16 / 9; }
.ov-video.is-landscape .ov-video-el   { object-fit: cover; }

/* 縦長だけ個別に切り替える */
.ov-video.is-portrait .ov-video-frame { aspect-ratio: 9 / 16; }
.ov-video.is-portrait .ov-video-el    { object-fit: contain; }

/* 正方形（1:1） */
.ov-video.is-square .ov-video-frame { aspect-ratio: 1 / 1; }
.ov-video.is-square .ov-video-el    { object-fit: contain; background: transparent; }
/* ※ 枠いっぱいに見せたいなら contain → cover に変更 */




/* =========================
   INFO pane
========================= */
.ov-info{
  padding:0 min(2vw,16px) 28px;
  max-width:1200px; margin:0 auto;
}
.ov-info-grid{ display:grid; grid-template-columns:1fr; gap:18px 24px; }
@media (min-width:900px){
  .ov-info-grid{ grid-template-columns:1.2fr 1fr; }
}
.ov-info h3{
  font-size:11px; letter-spacing:.08em; text-transform:uppercase;
  margin:18px 0 8px;
}
.ov-info p{ font-size: 13px; line-height:1.4;  }
.ov-info-contacts{
  display:flex; flex-wrap:wrap; gap:10px 14px;
  list-style:none; padding:0; margin:8px 0 0; font-size:13px;
}
.ov-info-contacts a{ text-decoration:none; padding-bottom:2px; }
.ov-info .bullets{ list-style:none; padding:0; margin:8px 0 0; }
.ov-info .bullets li{ margin:0 0 6px; font-size:12px; line-height: 1.6; }
.ov-info .tags{
  display:flex; flex-wrap:wrap; gap:8px 10px;
  list-style:none; padding:0; margin:8px 0 12px;
}
.ov-info .tags li {
  font-size: 11px;
  padding: 4px 10px;              /* 内側余白（楕円感の調整） */
  border-radius: 9999px;          /* pill 型にする */
  background: rgba(0,0,0,0.06);   /* 薄いグレー背景 */
  display: inline-block;          /* 幅がテキストに合わせて楕円になる */
}

/* Overview/Film/Info タブのアクティブ下線 */
.ov-cat.is-active {
  position: relative;
}

.ov-cat.is-active::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;             /* 文字のすぐ下に表示 */
  height: 2px;              /* 下線の太さ */
  background-color: #000000a5;   /* 下線の色 */
}























/* === Info > SELECTED CLIENTS のチップを強制表示＆デザイン復帰 === */
.ov-info .tags{
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px 10px !important;
  list-style: none !important;
  padding: 0 !important;
  margin: 8px 0 12px !important;
}
.ov-info .tags li{
  display: inline-block !important;
  font-size: 11px !important;
  padding: 4px 10px !important;
  border-radius: 9999px !important;
  background: rgba(0,0,0,.06) !important;  /* うっすらグレーの楕円 */
}
.ov-info .tags li a{
  display: block !important;
  color: #111 !important;
  text-decoration: none !important;
}

/* Selected Clients のリンクを黒固定 */
#clientTags a:any-link {
  color: #111 !important;
  -webkit-text-fill-color: #111 !important; /* iOS用 */
  text-decoration: none !important;
}

#btnOverview {
  color: #111 !important;
  -webkit-text-fill-color: #111 !important;
  text-decoration: none !important;
}

.ov-cat {
  color: #111 !important;
  -webkit-text-fill-color: #111 !important;
  text-decoration: none !important;
}

.ov-cat,
.ov-link {
  display: inline-flex;
  align-items: center;
  font-size: 14px;
  font-weight: 600;
  line-height: 1;       /* 行の高さを統一 */
  padding: 0 2px;       /* 上下のズレを解消 */
}




/* カテゴリタブ（span.role=button）も念のため固定 */
#overviewPanel .ov-cat {
  color:#111 !important;
  -webkit-text-fill-color:#111 !important;
  text-decoration:none !important;
}

/* Selected Clients（自動生成リスト）はこれでOK（再掲） */
#clientTags a:any-link{
  color:#111 !important;
  -webkit-text-fill-color:#111 !important;
  text-decoration:none !important;
}

/* ===== iOS青字 完全封印（Selected Clients／オーバーレイ右上リンク） ===== */
html body #overviewPanel .ov-info #clientTags li a:any-link,
html body #overviewPanel .ov-rightlinks a:any-link,
html body #overviewPanel .ov-link:any-link {
  color:#111 !important;
  -webkit-text-fill-color:#111 !important; /* iOSの内部色も上書き */
  text-decoration:none !important;
}

/* タブ（Overview / Film / Info は span.role=button） */
html body #overviewPanel .ov-cat{
  color:#111 !important;
  -webkit-text-fill-color:#111 !important;
  text-decoration:none !important;
}



/* タップ時の青いハイライトも消す */
#btnOverview {
  -webkit-tap-highlight-color: transparent;
}


/* iOSの自動リンク化を黒に固定 */
a[x-apple-data-detectors]{
  color: #111 !important;
  text-decoration: none !important;
}

/* Info内のタグにアンカーが入っている場合の保険 */
.ov-info .tags a{
  color: #111 !important;
  text-decoration: none !important;
}

.topbar-right a:any-link{
  color:#111 !important;
  -webkit-text-fill-color:#111 !important; /* iOSの強いUA色を上書き */
  text-decoration:none !important;
}








/* === Force: put .ov-rightlinks under artist/role (global) === */
#overviewPanel .ov-header{
  display: flex;              /* ヘッダー内だけ縦積み */
  flex-direction: column;
  align-items: flex-start;

}

/* ov-toprow の“行そのもの”を無くして中身だけ流す */
#overviewPanel .ov-toprow{
  display: contents !important;   /* ← これで自分の枠を持たない */
  height: auto !important;
  margin: 0 !important;
  justify-content: initial !important;
}

/* 右上の絶対配置を解除して、タイトル下へ */
#overviewPanel .ov-rightlinks{
  position: static !important;
  top: auto !important;
  right: auto !important;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-start;
}



/* Overview が開いている間は body の余白をゼロにする */
body.ov-open {
  padding-top: 0 !important;
}