/* =====================================================================
   page-works.css — 制作実績ページ専用（design/Sun Creative_update.xd 準拠）
   仕様: design/xd-spec/works-pc.txt / works-sp.txt
     ※ works-sp.txt は XD 上のアートボード名が「会社概要_w390_マージン40_SP – 4」
       だが、中身は制作実績の SP 版（Portfolio / Tik Tok）。

   PC は 1920px 基準の vw 比例（value / 19.2 = vw）、
   SP は top.css の --u（= 100vw/390）で XD の 1px をそのまま表す。

   前提: body に page-top2 / page-sub / page-sub--works を併記する。
     page-top2 … top.css の共通トークン・ヘッダー・フッター・右端レール・Contact帯
     page-sub  … page.css（パンくず＋ヒーロー / ドロップダウン）
     本ファイルは制作実績固有のセクション（Tik Tok）だけを持つ。
   共通部品（.sub-head / .sub-breadcrumb / .sub-hero / .t2-contact* / .footer /
   .t2-footer-menu / .t2-hero__aside / .t2-nav__dropdown）は一切再定義しない。
   ===================================================================== */

/* =====================================================================
   セクション共通（黒＝Tik Tok）
   XD: 縦線(x=240 h=115) + 見出し(40px ExtraBold ls100 #40A9FA) +
       横線(x=210.5 w=1500) の十字モチーフ
   ===================================================================== */
.wk-sec { position: relative; }

/* Tik Tok：XD y=450–2055 の黒面。縦線/横線は白 */
.wk-sec--tiktok {
  background: #000;
  color: #fff;
  padding-block: 3.203vw 5vw;     /* 61.5px / 96px */
}

/* 見出しブロック。基準点（top:0）は XD の縦線上端 */
.wk-sec__head {
  position: relative;
  padding-top: 1.253vw;           /* 縦線上端 → 見出し行ボックス上端（ベースライン61.5px） */
  margin-bottom: 3.516vw;         /* 見出し行ボックス下端 → タイル上端（合計131.5px） */
}

.wk-sec__head::before {           /* 縦線 x=240 / 長さ115 */
  content: "";
  position: absolute;
  left: 12.5vw;
  top: 0;
  width: 1px;
  height: 5.99vw;
  background: currentColor;
}
.wk-sec__head::after {            /* 横線 x=210.5 / 幅1500 / 縦線上端から82px */
  content: "";
  position: absolute;
  left: 10.964vw;
  top: 4.271vw;
  width: 78.125vw;
  height: 1px;
  background: currentColor;
}
.wk-sec__title {                  /* Noto Sans JP / 40px / ExtraBold / ls100 / #40A9FA */
  margin: 0 0 0 var(--mg);
  font-family: var(--gothic);
  font-size: 2.083vw;
  font-weight: 800;
  letter-spacing: .1em;
  line-height: 1;
  color: var(--sky);
}

/* =====================================================================
   カードグリッド
   Tik Tok : 282x500・角丸30・4列（x=260/634/1006/1376 → gap 92px）
   版面 1400px（左右マージン 260px）に収まる
   ===================================================================== */
.wk-grid {
  display: grid;
  padding-inline: var(--mg);
}
.wk-grid--tiktok {
  grid-template-columns: repeat(4, 1fr);
  column-gap: 4.792vw;            /* 92px */
  row-gap: 5vw;                   /* 96px（1行目キャプション下端 → 2行目タイル上端） */
}

.wk-card { margin: 0; }

/* 画像枠。親が min-height しか持たない場合に img{height:100%} が auto に
   解決されるのを避けるため、画像は必ず absolute + object-fit: cover にする */
.wk-card__media {
  position: relative;
  overflow: hidden;
  border-radius: 1.563vw;         /* 30px */
  background: #111;
}
.wk-card__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.wk-card__media--tiktok { aspect-ratio: 282 / 500; }

/* TikTok タイルは再生ボタン。XDの見た目は静止画のままなので、
   ボタン由来の装飾を消してホバー時だけ再生アイコンを出す */
.wk-card__play {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  appearance: none;
  cursor: pointer;
  color: inherit;
  font: inherit;
}
.wk-card__play::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: rgba(0, 0, 0, .25);
  opacity: 0;
  transition: opacity .3s ease;
}
.wk-card__play::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 2;
  transform: translate(-50%, -50%) scale(.85);
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 1.146vw 0 1.146vw 1.979vw;   /* 22px / 38px */
  border-color: transparent transparent transparent #fff;
  opacity: 0;
  transition: opacity .3s ease, transform .3s ease;
}
.wk-card__play:hover::before,
.wk-card__play:focus-visible::before { opacity: 1; }
.wk-card__play:hover::after,
.wk-card__play:focus-visible::after { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.wk-card__play:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

/* タッチ環境はホバーが無いので常時うっすら出す */
@media (hover: none) {
  .wk-card__play::after { opacity: .85; }
}

/* キャプション：18px Regular / 行間30 / タイル下端から20px */
.wk-card__caption {
  margin: 1.042vw 0 0;
  font-size: .938vw;
  font-weight: 400;
  line-height: 1.667;             /* 30 / 18 */
  letter-spacing: .02em;
  color: inherit;
}
.wk-card__handle { display: block; }

/* =====================================================================
   SP（XD: 390px アートボード準拠 / --u = 100vw/390）
   - 縦線 x=21 長さ60、横線は画面全幅（XD: x=0 w=390.5）
   - Tik Tok は 145x257 を2列（左右マージン30・列間40）
   - YouTube は 350x197 を1列（左右マージン20）
   ===================================================================== */
@media (max-width: 1023px) {

  .wk-sec--tiktok  { padding-block: calc(12 * var(--u)) calc(57 * var(--u)); }

  .wk-sec__head {
    padding-top: calc(13 * var(--u));
    margin-bottom: calc(40 * var(--u));
  }

  .wk-sec__head::before { left: calc(21 * var(--u)); height: calc(60 * var(--u)); }
  .wk-sec__head::after  { left: 0; width: 100%; top: calc(42 * var(--u)); }

  .wk-sec__title {
    margin-left: calc(29 * var(--u));
    font-size: calc(23 * var(--u));
    font-weight: 700;             /* XD SP は Bold */
  }

  .wk-grid--tiktok {
    grid-template-columns: repeat(2, 1fr);
    column-gap: calc(40 * var(--u));
    row-gap: calc(58 * var(--u));
    padding-inline: calc(30 * var(--u));
  }

  .wk-card__media { border-radius: calc(20 * var(--u)); }
  .wk-card__play::after {
    border-width: calc(13 * var(--u)) 0 calc(13 * var(--u)) calc(22 * var(--u));
  }

  .wk-card__caption {
    margin-top: calc(13 * var(--u));
    font-size: calc(13 * var(--u));
    line-height: calc(22 / 13);
  }
}

/* =====================================================================
   TikTok 再生モーダル
   TikTok の embed iframe は高さ 739px が設計値で、最下部に「TikTok で見る」
   バーが入る。ステージ側で clip して隠す（旧works.htmlと同じ手当て）
   ===================================================================== */
.wk-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity .25s ease;
}
.wk-modal.is-open { opacity: 1; }
.wk-modal[hidden] { display: none; }

.wk-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, .82);
  backdrop-filter: blur(4px);
}

.wk-modal__panel {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  max-height: 100%;
}

.wk-modal__handle {
  margin: 0;
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .04em;
}

.wk-modal__close {
  position: absolute;
  top: -6px;
  right: -44px;
  width: 36px;
  height: 36px;
  padding: 6px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .12);
  color: #fff;
  cursor: pointer;
  transition: background .2s ease;
}
.wk-modal__close:hover { background: rgba(255, 255, 255, .28); }
.wk-modal__close svg { width: 100%; height: 100%; display: block; }

.wk-modal__stage {
  position: relative;
  width: min(325px, 90vw);
  height: min(739px, 78vh);
  overflow: hidden;
  border-radius: 10px;
  background: #000;
}
.wk-modal__stage iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 739px;                  /* 固定＝TikTok の設計値。はみ出た下端は親で clip */
  border: 0;
}

@media (max-width: 1023px) {
  /* 画面幅が狭いとパネル横に閉じるボタンを置けないので、画面右上に固定する
     （.wk-modal 自体が position:fixed なので transform 付きの祖先は無い） */
  .wk-modal__close {
    position: fixed;
    top: calc(12 * var(--u));
    right: calc(12 * var(--u));
    width: calc(36 * var(--u));
    height: calc(36 * var(--u));
    padding: calc(7 * var(--u));
  }
  .wk-modal__handle { font-size: calc(14 * var(--u)); }
  .wk-modal__stage { width: min(325px, 86vw); }
}