/* FOLKS Inc. — Wix 版 www.folks-inc.com と同じ見た目で作り直したもの。
   寸法は Wix 版を幅 1280px で測った値（コメントの数字はその時の座標）。 */

/* ---------- 書体 ----------
   Futura … Wix には Mac 付属の Futura Medium が上げてあった。配ることはできないので、
            Mac・iPhone では本体の Futura を名前で呼び、無い環境では無料の Jost を使う。
            太字は Wix と同じく Medium を太らせた形になるよう、Futura は 1 ウェイトだけ宣言する。 */
@font-face { font-family: "Folks Futura"; src: local("Futura Medium"), local("Futura-Medium"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Jost"; src: url("/assets/fonts/jost-latin-var.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Barlow"; src: url("/assets/fonts/barlow-700-latin.woff2") format("woff2"); font-weight: 700; font-display: swap; }
/* 筑紫ゴシック（Wix 専用の書体）の代わり。トップの 3 つの説明文に使う字だけを切り出した Zen Kaku Gothic New */
@font-face { font-family: "Folks Gothic"; src: url("/assets/fonts/zenkaku-700-subset.woff2") format("woff2"); font-weight: 700; font-display: swap; }

:root {
  --futura: "Folks Futura", "Jost", "Futura", sans-serif;
  --mincho: "ｍｓ ｐ明朝", "ms pmincho", "ヒラギノ明朝 pro w3", "hiragino mincho pro", "Hiragino Mincho ProN", serif;
  --red: #a40000;
  --header-h: 75px;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0; background: #000; color: #fff;
  font-family: Arial, "Helvetica Neue", Helvetica, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
h1, h2, h3, p { margin: 0; font-weight: inherit; }
button { font: inherit; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.futura { font-family: var(--futura); }
main { display: block; padding-top: var(--header-h); }

/* ---------- ヘッダー（白・固定、高さ 75） ---------- */
.site-header { position: fixed; z-index: 50; top: 0; left: 0; right: 0; height: var(--header-h); background: #fff; color: #000; }
.logo { position: absolute; top: 24px; left: calc(6.2vw + 5px); display: block; color: #000; }
.logo-name { display: block; font: 500 16px/18px var(--futura); white-space: nowrap; }
.logo-sub { display: block; font: 300 11px/15px "Jost", sans-serif; white-space: nowrap; }
.site-nav { position: absolute; top: 22px; left: 50%; transform: translateX(-50%); display: flex; }
.site-nav a { display: block; padding: 0 15.5px; font: 500 16px/30px var(--futura); color: #000; white-space: nowrap; transition: color .15s; }
.site-nav a:hover, .site-nav a[aria-current="page"] { color: var(--red); }
.social { position: absolute; top: 18px; right: calc(9.24vw - 26px); display: flex; gap: 10px; }
.social a { display: block; width: 39px; height: 39px; color: #000; }
.social svg { display: block; width: 39px; height: 39px; }
.menu-button { display: none; }

/* ---------- フッター（黒、高さ 269） ---------- */
.site-footer { position: relative; height: 269px; background: #000; color: #fff; }
.footer-inner { position: absolute; top: 78px; left: calc(88.04vw - 389px); }
.footer-name { display: inline-block; font: 700 30px/42px var(--futura); color: #fff; }
.footer-text { margin-top: 7px; font: 400 14px/20px Arial, sans-serif; }
.footer-text a { color: #fff; }

/* ---------- 見出し（WORKS・CONTACT など） ---------- */
.page-title { font: 700 35px/49px var(--futura); text-align: center; }

/* ---------- トップ ---------- */
.hero { position: relative; height: 796px; clip-path: inset(0); background: #c9bfca url("/media/misc/hero-poster.webp") center / cover no-repeat; }
.hero video { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; object-fit: cover; }

.services { display: grid; grid-template-columns: 436fr 422fr 422fr; height: 539px; }
.service { position: relative; overflow: hidden; background: #000; text-align: center; }
.service > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.service-icon { position: absolute; top: 118px; left: 50%; transform: translate(-50%, -50%); fill: #fff; }
.service h2 { position: absolute; top: 191px; left: 0; right: 0; font: 700 27px/37.8px "Barlow", sans-serif; color: #fff; }
.service p { position: absolute; top: 253px; left: 50%; width: 240px; transform: translateX(-50%); font: 700 16px/24px "Folks Gothic", "Hiragino Kaku Gothic ProN", sans-serif; color: #fafafa; }
.service:nth-child(2) p { line-height: 27.2px; }
.service:nth-child(3) p { line-height: 30.4px; }

.home-works { position: relative; height: 763px; text-align: center; }
.home-works h2 { position: absolute; top: 63px; left: 0; right: 0; font: 700 30px/39px var(--futura); }
.works-grid { position: absolute; top: 153px; left: 50%; transform: translateX(-50%); width: min(924px, calc(100% - 40px)); display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px; }
.works-grid a { position: relative; display: block; aspect-ratio: 298 / 163; overflow: hidden; }
.works-grid img { width: 100%; height: 100%; object-fit: cover; }
.works-grid a::after { content: ""; position: absolute; inset: 0; background: rgba(0, 0, 0, .8); opacity: 0; transition: opacity .2s; }
.works-grid a:hover::after { opacity: 1; }
.button-pill { display: inline-block; height: 40px; padding: 0 22px; border-radius: 12px; background: #fff; color: #000; font: 500 15px/40px var(--futura); letter-spacing: .75px; transition: background .15s, color .15s; }
.button-pill:hover { background: #000; color: #fff; box-shadow: inset 0 0 0 1px #fff; }
.home-works .button-pill { position: absolute; top: 710px; left: 50%; transform: translateX(-50%); width: 142px; padding: 0; }

.dashed { position: absolute; top: 21px; left: 50%; width: 1132px; margin-left: -566px; border-top: 1px dashed #fff; }
.clients { position: relative; height: 702px; }
.clients h2 { position: absolute; top: 53px; left: 0; right: 0; text-align: center; font: 700 35px/49px "Barlow", sans-serif; }
.logos { position: absolute; top: 142px; left: max(20px, calc(9.78vw - 72px)); right: max(20px, calc(9.78vw - 72px)); display: grid; grid-template-columns: repeat(5, minmax(0, 150px)); justify-content: space-between; row-gap: 44px; }
.logos img { width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; }

/* ---------- ABOUT ---------- */
.about-intro { position: relative; height: 371px; text-align: center; }
.about-intro h1 { position: absolute; top: 23px; left: 0; right: 0; }
.about-text { position: absolute; top: 94px; left: 0; right: 0; font: 400 18px/26px var(--mincho); white-space: pre-line; }
.about .clients { height: 682px; }
.about .clients h2 { top: 71px; font: 400 20px/28px var(--futura); }
.about .logos { top: 122px; row-gap: 45px; }
.about + .site-footer { margin-top: 40px; }

/* ---------- WORKS（3 つの入口） ---------- */
.portfolio-page { padding-bottom: 40px; }
.portfolio-page .page-title { padding-top: 62px; }
.collection-tiles { margin: 39px 40px 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; }
.collection-tiles a { position: relative; display: block; height: 280px; overflow: hidden; }
.collection-tiles img { width: 100%; height: 100%; object-fit: cover; }
.collection-tiles span { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 0 20px; font: 700 24px/32px var(--futura); text-align: center; color: #fff; transition: opacity .2s; }
.collection-tiles a:hover span { opacity: 0; }

/* ---------- 作品一覧（MUSIC VIDEO など） ---------- */
.back-link { position: absolute; top: calc(var(--header-h) + 52px); left: 44px; display: flex; align-items: center; gap: 8px; font: 400 16px/19px Arial, sans-serif; color: #fff; }
.back-link svg, .pager svg { width: 12px; height: 12px; stroke: #fff; fill: none; stroke-width: 2; }
.collection { position: relative; min-height: 600px; padding-bottom: 120px; }
.collection .collection-title { padding-top: 144px; font: 400 27px/37.8px var(--futura); text-align: center; }
.project-grid { margin: 79px 40px 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 40px; }
.project-grid a { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; background: #111; }
.project-grid img { width: 100%; height: 100%; object-fit: cover; }
.project-grid span { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 12px 16px; background: rgba(0, 0, 0, .6); font: 400 20px/1.25 Arial, sans-serif; color: #fff; text-align: center; opacity: 0; transition: opacity .2s; overflow-wrap: anywhere; }
.project-grid a:hover span, .project-grid a:focus-visible span { opacity: 1; }

/* ---------- 作品ページ ---------- */
.project-intro { display: flex; justify-content: space-between; gap: 40px; padding: 60px 40px 0; }
.project-intro h1 { width: 600px; max-width: 100%; font: 400 27px/37.8px var(--futura); }
.project-details { flex: 0 0 277px; margin-top: 12px; font: 400 20px/28px Arial, sans-serif; white-space: pre-line; overflow-wrap: anywhere; }
.project-cover { display: block; width: calc(100% - 80px); height: 100vh; margin: 62px 40px 0; object-fit: cover; }
.project-gallery { margin: 60px 40px 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 40px; }
.project-gallery button { position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; padding: 0; border: 0; background: #111; cursor: pointer; overflow: hidden; }
.project-gallery img { width: 100%; height: 100%; object-fit: cover; }
.project-gallery button::after { content: ""; position: absolute; inset: 0; background: rgba(0, 0, 0, .35); opacity: 0; transition: opacity .2s; }
.project-gallery button:hover::after { opacity: 1; }
.pager { display: flex; justify-content: space-between; height: 45px; margin: 40px 40px 0; }
.pager a { display: flex; align-items: center; gap: 10px; font: 400 16px/45px Arial, sans-serif; color: #fff; }
.project + .site-footer { margin-top: 40px; }

/* 拡大表示 */
.lightbox { position: fixed; z-index: 100; inset: 0; display: none; background: #000; }
.lightbox.open { display: block; }
.lightbox-stage { position: absolute; inset: 60px 80px; display: flex; align-items: center; justify-content: center; }
.lightbox-stage img { max-width: 100%; max-height: 100%; object-fit: contain; }
.lightbox-stage iframe { width: min(100%, calc((100vh - 120px) * 16 / 9)); aspect-ratio: 16 / 9; border: 0; }
.lightbox button { position: absolute; padding: 10px; border: 0; background: none; color: #fff; cursor: pointer; }
.lightbox svg { display: block; width: 28px; height: 28px; stroke: #fff; fill: none; stroke-width: 1.5; }
.lightbox .lb-close { top: 14px; right: 14px; }
.lightbox .lb-prev { top: 50%; left: 16px; transform: translateY(-50%); }
.lightbox .lb-next { top: 50%; right: 16px; transform: translateY(-50%); }

/* ---------- CREATOR ---------- */
.creator { position: relative; max-width: 980px; margin: 0 auto; padding-bottom: 134px; }
.creator .page-title { padding-top: 41px; }
.creator-cols { display: grid; grid-template-columns: 443px 443px; justify-content: space-between; margin-top: 61px; padding: 0 17px; }
.creator-photo { width: 100%; aspect-ratio: 443 / 431; object-fit: cover; }
.creator-name { margin-top: 15px; font: 700 20px/28px Arial, sans-serif; }
.creator-name.regular { font-weight: 400; }
.creator-role { margin-top: 11px; font: 400 16px/22.4px Arial, sans-serif; }
.creator-bio { margin-top: 46px; font: 400 16px/22.4px Arial, sans-serif; }
.creator-bio p + p { margin-top: 22.4px; }

/* ---------- CONTACT ---------- */
.contact { position: relative; padding-bottom: 66px; }
.contact .page-title { padding-top: 63px; }
.contact-form { width: 514px; margin: 14px auto 0; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 23px; }
.field { display: block; margin-top: 22px; }
.form-row .field { margin-top: 0; }
.field span { display: block; margin: 0 0 7px 2px; font: 400 14px/20px Arial, sans-serif; color: #fff; }
.field input, .field textarea { display: block; width: 100%; height: 44px; padding: 0 12px; border: 1px solid #9c9c9c; border-radius: 0; background: transparent; color: #fff; font: 400 16px/1.4 Arial, sans-serif; }
.field textarea { height: 98px; padding: 10px 12px; resize: vertical; }
.field input:focus, .field textarea:focus { outline: none; border-color: #fff; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-actions { display: flex; justify-content: flex-end; margin-top: 23px; }
.form-actions button { width: 143px; height: 40px; border: 0; border-radius: 20px; background: #fafafa; color: #000; font: 400 16px/40px Arial, sans-serif; cursor: pointer; }
.form-actions button:disabled { opacity: .6; cursor: default; }
.form-status { min-height: 22px; margin-top: 14px; font: 400 14px/20px Arial, sans-serif; text-align: right; }
.form-status.error { color: #ff8a8a; }
.contact-line { width: min(980px, calc(100% - 40px)); margin: 60px auto 0; border-top: 1px solid #fff; }

/* ---------- 404 ---------- */
.notfound { min-height: 60vh; padding: 120px 20px; text-align: center; }
.notfound p { margin-top: 20px; font: 400 16px/1.8 Arial, sans-serif; }
.notfound .button-pill { margin-top: 30px; }

/* ---------- 幅が狭い画面（タブレット） ---------- */
@media (max-width: 1023px) {
  .services { height: auto; }
  .service { min-height: 539px; }
  .creator-cols { grid-template-columns: 1fr 1fr; gap: 40px; }
  .project-grid { grid-template-columns: repeat(3, 1fr); }
  .footer-inner { left: auto; right: 40px; }
}

/* ---------- スマートフォン ---------- */
@media (max-width: 767px) {
  :root { --header-h: 60px; }
  .logo { top: 14px; left: 16px; }
  .logo-name { font-size: 19px; line-height: 20px; }
  .logo-sub { font-size: 13px; line-height: 16px; }
  .social { top: 12px; right: 56px; gap: 4px; }
  .social a, .social svg { width: 36px; height: 36px; }
  .menu-button { position: absolute; top: 12px; right: 10px; display: block; width: 40px; height: 36px; padding: 6px; border: 0; background: none; cursor: pointer; }
  .menu-button span { display: block; height: 2px; margin: 5px 0; background: #000; transition: transform .2s, opacity .2s; }
  .menu-open .menu-button span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .menu-open .menu-button span:nth-child(2) { opacity: 0; }
  .menu-open .menu-button span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
  .site-nav { position: fixed; top: var(--header-h); left: 0; right: 0; bottom: 0; transform: none; display: none; flex-direction: column; align-items: center; padding-top: 40px; background: #fff; }
  .menu-open .site-nav { display: flex; }
  .site-nav a { font-size: 22px; line-height: 64px; }

  .hero { height: min(162vw, calc(100svh - var(--header-h))); clip-path: none; overflow: hidden; }
  .hero video { position: absolute; width: 100%; height: 100%; }

  .services { display: block; }
  .service { min-height: 0; height: 380px; }
  .service-icon { top: 70px; transform: translate(-50%, -50%) scale(.8); }
  .service h2 { top: 118px; font-size: 24px; }
  .service p { top: 166px; width: min(300px, calc(100% - 40px)); }

  .home-works { height: auto; padding: 50px 15px 40px; }
  .home-works h2, .works-grid, .home-works .button-pill { position: static; transform: none; }
  .works-grid { width: 100%; margin-top: 30px; grid-template-columns: 1fr 1fr; gap: 10px; }
  .works-grid a:nth-child(9) { display: none; }
  .home-works .button-pill { display: inline-block; margin-top: 30px; }

  .dashed { left: 20px; right: 20px; width: auto; margin-left: 0; }
  .clients, .about .clients { height: auto; padding: 60px 20px 50px; }
  .clients h2, .about .clients h2 { position: static; font-size: 26px; line-height: 36px; }
  .about .clients h2 { font-size: 20px; }
  .logos, .about .logos { position: static; margin-top: 30px; grid-template-columns: repeat(3, 1fr); gap: 16px; }

  .site-footer { height: auto; padding: 40px 20px 60px; }
  .footer-inner { position: static; }
  .footer-text { font-size: 13px; line-height: 19px; }

  .about-intro { height: auto; padding: 30px 20px 40px; }
  .about-intro h1, .about-text { position: static; }
  .about-text { margin-top: 24px; font-size: 15px; line-height: 24px; }

  .portfolio-page .page-title, .creator .page-title, .contact .page-title { padding-top: 36px; font-size: 30px; }
  .collection-tiles { margin: 30px 15px 0; grid-template-columns: 1fr; gap: 15px; }
  .collection-tiles a { height: 200px; }

  .back-link { top: calc(var(--header-h) + 20px); left: 16px; font-size: 14px; }
  .collection { min-height: 0; padding-bottom: 60px; }
  .collection .collection-title { padding-top: 70px; font-size: 24px; }
  .project-grid { margin: 30px 12px 0; grid-template-columns: 1fr 1fr; gap: 12px; }
  .project-grid span { display: none; }

  .project-intro { display: block; padding: 30px 16px 0; }
  .project-intro h1 { font-size: 22px; line-height: 30px; }
  .project-details { margin-top: 18px; font-size: 15px; line-height: 22px; }
  .project-cover { width: calc(100% - 32px); height: auto; aspect-ratio: 16 / 9; margin: 30px 16px 0; }
  .project-gallery { margin: 16px 16px 0; grid-template-columns: 1fr; gap: 16px; }
  .pager { margin: 30px 16px 0; }
  .pager a { font-size: 14px; }
  .lightbox-stage { inset: 56px 0; }
  .lightbox .lb-prev, .lightbox .lb-next { top: auto; bottom: 8px; transform: none; }

  .creator { padding: 0 16px 40px; }
  .creator-cols { display: block; margin-top: 30px; padding: 0; }
  .creator-col + .creator-col { margin-top: 60px; }
  .creator-bio { margin-top: 26px; font-size: 15px; line-height: 22px; }
  .creator-bio p + p { margin-top: 18px; }

  .contact-form { width: auto; margin: 24px 16px 0; }
  .form-row { grid-template-columns: 1fr; gap: 0; }
  .form-row .field + .field { margin-top: 22px; }
}

@media (prefers-reduced-motion: reduce) {
  .hero video { display: none; }
}