/*
Theme Name: JAZZRIZE DESIGN
Theme URI: https://jazzrize.com/
Author: JAZZRIZE DESIGN
Description: 株式会社JAZZRIZE DESIGN コーポレートサイト用オリジナルテーマ。TOPページ(1枚縦長スクロール)を実装。WORKS(実績)・NEWS(お知らせ)は管理画面から更新できるカスタム投稿タイプ/投稿として構成しています。
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: jazzrize-design
*/

/* ==========================================================================
   Design tokens
   ========================================================================== */
:root{
  --ink:#121212;
  --paper:#ffffff;
  --muted:#5b584f;
  --hair:#e6e3da;
  --accent:#121212;

  --ink-dark:#f5f4f0;
  --paper-dark:#131211;
  --muted-dark:#9c988c;
  --hair-dark:#2a2926;

  --font-jp:'Noto Sans JP', -apple-system, BlinkMacSystemFont, "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
  --font-en:'Helvetica Neue', Helvetica, Arial, sans-serif;

  --gutter: clamp(20px, 5vw, 64px);
}

/* ==========================================================================
   Reset / base
   ========================================================================== */
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font-jp);
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ margin:0; padding:0; list-style:none; }
button{ font-family:inherit; }

.u-hair{ background:var(--hair); }

/* ==========================================================================
   Site header / nav
   ========================================================================== */
.site-header{
  position:sticky; top:0; z-index:50;
  display:flex; align-items:center; justify-content:space-between;
  padding:22px var(--gutter);
  background:var(--paper);
  border-bottom:1px solid var(--hair);
}
.site-header.is-on-dark{
  position:fixed; left:0; right:0; top:0; z-index:50;
  background:transparent; border-bottom:1px solid rgba(255,255,255,.3);
  transition:background-color .3s ease, border-color .3s ease;
}
.site-header__logo img{ height:42px; width:auto; }
.site-header.is-on-dark .site-header__logo img{ filter:brightness(0) invert(1); }

.site-nav ul{ display:flex; gap:clamp(18px,3vw,34px); }
.site-nav a{
  font-size:15px; letter-spacing:.08em; font-weight:700; color:var(--muted);
}
.site-header.is-on-dark .site-nav a{ color:rgba(255,255,255,.85); }
.site-nav a:hover, .site-nav a.is-current{ color:var(--ink); }
.site-header.is-on-dark .site-nav a:hover,
.site-header.is-on-dark .site-nav a.is-current{ color:#fff; }

.nav-toggle{
  display:none; background:none; border:0; cursor:pointer; padding:6px;
}
.nav-toggle span{
  display:block; width:22px; height:2px; background:var(--ink); margin:5px 0;
}
.site-header.is-on-dark .nav-toggle span{ background:#fff; }

/* ヘッダー: スクロール後は背景を付けて可読性を確保 */
.site-header.is-on-dark.is-scrolled{
  background:var(--paper); border-bottom:1px solid var(--hair);
}
.site-header.is-on-dark.is-scrolled .site-header__logo img{ filter:none; }
.site-header.is-on-dark.is-scrolled .site-nav a{ color:var(--muted); }
.site-header.is-on-dark.is-scrolled .site-nav a.is-current{ color:var(--ink); }
.site-header.is-on-dark.is-scrolled .nav-toggle span{ background:var(--ink); }

.nav-close{ display:none; }
@media (max-width: 780px){
  .nav-toggle{ display:block; }
  .nav-close{
    display:block; position:absolute; top:28px; right:32px; background:none; border:0; cursor:pointer; padding:6px; color:var(--ink);
  }
  .nav-close svg{ width:22px; height:22px; display:block; }
  .site-nav{
    position:fixed; inset:0 0 0 auto; width:min(78vw,320px); height:100vh;
    background:var(--paper); border-left:1px solid var(--hair);
    transform:translateX(100%); transition:transform .28s ease;
    padding:96px 32px 32px; z-index:60;
  }
  .site-nav.is-open{ transform:translateX(0); }
  .site-nav ul{ flex-direction:column; gap:28px; }
  .site-nav a{ font-size:17px; }
  .site-header.is-on-dark .site-nav a{ color:var(--muted); }
  .site-header.is-on-dark .site-nav a:hover,
  .site-header.is-on-dark .site-nav a.is-current{ color:var(--ink); }
}

/* ==========================================================================
   Section shell
   ========================================================================== */
.jz-section{ padding:96px var(--gutter); }
.jz-section--tight{ padding-top:64px; padding-bottom:64px; }
.jz-section--dark{ background:var(--paper-dark); color:var(--ink-dark); }
.jz-eyebrow{
  font-size:11px; letter-spacing:.2em; font-weight:700; color:var(--muted);
  margin-bottom:20px;
}
.jz-section--dark .jz-eyebrow{ color:var(--muted-dark); }

/* ==========================================================================
   01 — Hero
   ========================================================================== */
.jz-hero{
  position:relative; min-height:100svh; color:#fff; overflow:hidden;
  display:flex; flex-direction:column; justify-content:flex-end;
  background:#0d0d0c;
}
.jz-hero__bg{ position:absolute; top:-15%; left:0; width:100%; height:130%; object-fit:cover; will-change:transform,opacity; opacity:0; transition:opacity 2.4s ease; }
.jz-hero__bg--active{ opacity:1; }
.jz-hero__scrim{
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(8,10,8,.42) 0%, rgba(8,10,8,.32) 32%, rgba(8,10,8,.66) 68%, rgba(8,10,8,.9) 100%);
}
.jz-hero__inner{ position:relative; z-index:1; padding:140px var(--gutter) 0; }
.jz-hero__title{
  font-family:var(--font-en); font-weight:900;
  font-size:clamp(48px, 9.5vw, 128px); line-height:.92; letter-spacing:-.02em;
}
.jz-hero__title span{ color:#fff; }
.jz-hero__kicker{ font-size:11px; letter-spacing:.2em; font-weight:700; margin-top:16px; }
.jz-hero__footer{
  position:relative; z-index:1;
  display:flex; flex-wrap:wrap; gap:24px; justify-content:space-between; align-items:flex-end;
  padding:40px var(--gutter) 36px;
}
.jz-hero__lead{ font-size:13px; line-height:1.85; max-width:420px; }
.jz-hero__meta{ display:flex; align-items:center; gap:14px; font-size:11px; letter-spacing:.1em; }
.jz-hero__meta .sep{ width:1px; height:14px; background:rgba(255,255,255,.3); }

/* ==========================================================================
   02 — Introduction
   ========================================================================== */
.jz-intro{ min-height:80svh; display:flex; flex-direction:column; justify-content:center; }
.jz-intro__title{
  font-family:var(--font-en); font-weight:900;
  font-size:clamp(34px, 6vw, 80px); line-height:1.06; letter-spacing:-.01em; max-width:1020px;
}
.jz-intro__row{ margin-top:8px; display:flex; flex-wrap:wrap; gap:56px; align-items:flex-end; }
.jz-intro__lead{ font-size:15px; line-height:2; max-width:480px; color:var(--muted); margin-top:34px; }
.jz-intro__line{ height:1px; flex-grow:1; min-width:80px; background:var(--hair); margin-bottom:14px; }

/* ==========================================================================
   03 — About
   ========================================================================== */
.jz-about{ display:grid; grid-template-columns:1fr 1fr; }
.jz-about__col{ padding:56px var(--gutter); }
.jz-about__col--text{ border-right:1px solid var(--hair); display:flex; flex-direction:column; justify-content:center; }
.jz-about__heading{ font-weight:900; font-size:clamp(28px,4vw,46px); line-height:1.28; }
.jz-about__body{ margin-top:28px; font-size:15px; line-height:2; max-width:440px; color:var(--muted); }
.jz-about__col--num{ display:flex; align-items:center; justify-content:center; min-height:280px; }
.jz-about__mark{ width:clamp(200px,34vw,420px); height:auto; }
.jz-about__mark svg{ width:100%; height:auto; display:block; }
@media (max-width: 860px){
  .jz-about{ grid-template-columns:1fr; }
  .jz-about__col--text{ border-right:0; border-bottom:1px solid var(--hair); }
}

/* ==========================================================================
   04 — What We Do
   ========================================================================== */
.jz-services__head{ display:flex; flex-wrap:wrap; gap:24px; justify-content:space-between; align-items:baseline; margin-bottom:6px; }
.jz-services__title{ font-weight:900; font-size:clamp(26px,4vw,38px); }
.jz-services__note{ font-size:12px; color:var(--muted); max-width:280px; text-align:right; line-height:1.7; }
@media (max-width:600px){ .jz-services__note{ text-align:left; max-width:none; } }
.jz-services__list{ margin-top:12px; }
.jz-services__row{
  border-top:1px solid var(--hair); padding:16px 0;
  display:flex; align-items:baseline; justify-content:space-between; gap:16px;
}
.jz-services__row:last-child{ border-bottom:1px solid var(--hair); }
.jz-services__row:hover .jz-services__name{ color:var(--accent); }
.jz-services__name{
  font-family:var(--font-en); font-weight:900; letter-spacing:-.01em;
  font-size:clamp(18px,3vw,28px);
}
.jz-services__index{ font-size:11px; color:var(--muted); flex-shrink:0; }

/* ==========================================================================
   05 — Selected Works
   ========================================================================== */
.jz-works__head{ display:flex; flex-wrap:wrap; gap:16px; align-items:baseline; justify-content:space-between; margin-bottom:22px; }
.jz-works__title{ font-weight:900; font-size:clamp(26px,4vw,38px); }
.jz-works__more{ font-size:12px; letter-spacing:.06em; color:var(--muted); border-bottom:1px solid var(--ink); padding-bottom:2px; }
.jz-works__grid{
  display:grid; grid-template-columns:1.7fr 1fr 1fr; grid-template-rows:1fr 1fr; gap:16px;
  min-height:520px;
}
.jz-work{
  position:relative; overflow:hidden; border:1px solid #ddd9cc; background:#f2f1ec;
  min-height:180px;
}
.jz-work--feature{ grid-row:1 / 3; }
.jz-work__img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.jz-work__scrim{
  position:absolute; inset:0;
  background:linear-gradient(0deg, rgba(0,0,0,.5) 0%, rgba(0,0,0,0) 45%);
}
.jz-work__cap{
  position:absolute; left:14px; bottom:12px; z-index:1;
  font-size:10px; letter-spacing:.06em; color:#fff;
}
.jz-work__cap b{ display:block; font-weight:900; font-size:13px; margin-bottom:2px; color:#fff; }
.jz-work--placeholder{
  background:repeating-linear-gradient(135deg,#f2f1ec,#f2f1ec 9px,#e8e5db 9px,#e8e5db 18px);
  display:flex; align-items:center; justify-content:center;
  font-size:10px; letter-spacing:.08em; color:#8b8778; font-weight:700;
}
.jz-works__preparing{
  grid-column:1 / -1; grid-row:1 / 3;
  min-height:520px;
  display:flex; align-items:center; justify-content:center;
  background:repeating-linear-gradient(135deg,#f2f1ec,#f2f1ec 9px,#e8e5db 9px,#e8e5db 18px);
  border:1px solid #ddd9cc;
  font-size:15px; letter-spacing:.2em; color:#8b8778; font-weight:700;
}
@media (max-width: 860px){
  .jz-works__grid{ grid-template-columns:1fr; grid-template-rows:none; min-height:0; }
  .jz-work--feature{ grid-row:auto; }
  .jz-work{ aspect-ratio:4/3; min-height:0; }
}

/* ==========================================================================
   06 — Store
   ========================================================================== */
.jz-store{ display:grid; grid-template-columns:1fr 1fr; }
.jz-store__text{ padding:56px var(--gutter); display:flex; flex-direction:column; justify-content:center; }
.jz-store__heading{
  font-family:var(--font-en); font-weight:900; font-size:clamp(30px,5vw,48px); line-height:1.18;
}
.jz-store__body{ margin-top:26px; font-size:15px; line-height:2; max-width:420px; color:var(--muted); }
.jz-store__link{ margin-top:28px; font-size:12px; letter-spacing:.06em; border-bottom:1px solid var(--ink); width:fit-content; padding-bottom:2px; }
.jz-store__photos{
  display:grid; grid-template-columns:1fr 1fr; grid-template-rows:1fr 1fr; gap:2px;
  padding:40px var(--gutter) 40px 0;
  aspect-ratio:1/1; align-self:center;
}
.jz-store__photos img{ width:100%; height:100%; object-fit:cover; border:1px solid #ddd9cc; }
@media (max-width: 860px){
  .jz-store{ grid-template-columns:1fr; }
  .jz-store__text{ border-right:0; border-bottom:1px solid var(--hair); }
  .jz-store__photos{ padding:24px var(--gutter) 40px; }
}

/* ==========================================================================
   07 — History
   ========================================================================== */
.jz-history{ text-align:center; display:flex; flex-direction:column; align-items:center; }
.jz-history__title{
  font-family:var(--font-en); font-weight:900; font-size:clamp(56px,14vw,148px); line-height:.88; letter-spacing:-.01em;
}
.jz-history__sub{ margin-top:24px; font-size:14px; letter-spacing:.14em; color:var(--muted); }
.jz-history__meta{
  margin-top:44px; display:flex; flex-wrap:wrap; justify-content:center; gap:0;
  font-size:12px; letter-spacing:.05em; color:#7a776b;
}
.jz-history__meta span{ padding:6px 26px; border-right:1px solid var(--hair); }
.jz-history__meta span:last-child{ border-right:0; }
.jz-history__lead{ margin-top:32px; max-width:640px; font-size:15px; line-height:2; color:var(--muted); text-align:center; }

/* ==========================================================================
   08 — News
   ========================================================================== */
.jz-news__head{ display:flex; flex-wrap:wrap; gap:16px; align-items:baseline; justify-content:space-between; margin-bottom:18px; }
.jz-news__title{ font-weight:900; font-size:clamp(26px,4vw,38px); }
.jz-news__filters{ display:flex; flex-wrap:wrap; gap:16px; font-size:11px; letter-spacing:.06em; color:var(--muted); }
.jz-news__filter{ padding:6px 14px; border:1px solid transparent; cursor:pointer; background:none; color:var(--muted); }
.jz-news__filter.is-active{ border-color:var(--ink); color:var(--ink); font-weight:700; }
.jz-news__list{ border-bottom:1px solid var(--hair); }
.jz-news__item{
  border-top:1px solid var(--hair); padding:17px 0;
  display:flex; flex-wrap:wrap; align-items:center; gap:12px 10px;
}
.jz-news__date{ font-size:12px; color:var(--muted); flex-shrink:0; }
.jz-news__cat{
  font-size:11px; color:var(--accent); flex-shrink:0; font-weight:700;
  background:#eeece4; border-radius:999px; padding:4px 12px;
}
.jz-news__title-link{ font-size:15px; font-weight:700; margin-left:16px; }
.jz-news__title-link:hover{ text-decoration:underline; }
@media (max-width:640px){
  .jz-news__title-link{ flex-basis:100%; font-size:16px; line-height:1.5; margin-left:0; }
}
.jz-news__empty{ padding:32px 0; color:var(--muted); font-size:13px; }

/* ==========================================================================
   09 — Contact
   ========================================================================== */
.jz-contact{ text-align:center; display:flex; flex-direction:column; align-items:center; min-height:70svh; justify-content:center; }
.jz-contact__title{
  font-family:var(--font-en); font-weight:900; font-size:clamp(52px,13vw,148px); line-height:.92;
}
.jz-contact__cta{
  margin-top:38px; display:inline-block; border:1px solid var(--ink-dark); color:var(--ink-dark);
  padding:15px 38px; font-size:13px; letter-spacing:.1em; font-weight:700;
}
.jz-contact__cta:hover{ background:var(--ink-dark); color:var(--paper-dark); }
.site-footer{
  display:flex; flex-wrap:wrap; gap:10px 24px; justify-content:space-between; align-items:center;
  padding:24px var(--gutter); border-top:1px solid var(--hair-dark);
  font-size:11px; letter-spacing:.06em; color:var(--muted-dark);
}

/* ==========================================================================
   Generic content pages (news/works archive & single) — minimal styling
   ========================================================================== */
.jz-basic{ padding:120px var(--gutter) 96px; max-width:860px; margin:0 auto; }
.jz-basic h1{ font-weight:900; font-size:clamp(28px,5vw,44px); margin-bottom:32px; }
.jz-basic .entry-content{ font-size:15px; line-height:2; color:var(--muted); }
.jz-basic .entry-content img{ margin:24px 0; }
.jz-basic-list{ padding:120px var(--gutter) 96px; max-width:960px; margin:0 auto; }

/* ==========================================================================
   固定ページ共通(ABOUT / VISION / SERVICE-DX / PRIVACY / THANKS / CONTACT)
   ========================================================================== */
.jz-page{ padding-top:88px; }
.jz-page__back{ padding:24px var(--gutter) 0; font-size:11px; letter-spacing:.1em; color:var(--muted); }
.jz-page__back a:hover{ color:var(--ink); }
.jz-breadcrumb{ padding:24px var(--gutter) 0; font-size:11px; letter-spacing:.05em; color:var(--muted); }
.jz-breadcrumb a{ color:var(--muted); text-decoration:none; }
.jz-breadcrumb a:hover{ color:var(--ink); }
.jz-page__head{ padding:20px var(--gutter) 0; }
.jz-page__eyebrow{ font-size:11px; letter-spacing:.2em; color:var(--muted); font-weight:700; margin-bottom:16px; }
.jz-page__title{ font-weight:900; font-size:clamp(32px,6vw,56px); line-height:1.2; font-family:var(--font-en); }
.jz-page__lead{ margin-top:20px; font-size:15px; line-height:2; color:var(--muted); max-width:620px; }
.jz-about-message{ display:grid; grid-template-columns:1fr 1.3fr; gap:56px; align-items:center; }
@media (max-width:780px){ .jz-about-message{ grid-template-columns:1fr; gap:28px; } }
.jz-page__photo{ margin:40px var(--gutter) 0; }
.jz-page__photo img{ width:calc(100% - var(--gutter)*2); max-width:calc(1280px - var(--gutter)*2); margin:0 auto; display:block; aspect-ratio:16/9; object-fit:cover; border:1px solid #ddd9cc; }
.jz-page__section{ padding:120px var(--gutter) 0; max-width:1280px; margin:0 auto; }
.jz-page__section-kicker{ font-size:11px; letter-spacing:.2em; color:var(--muted); font-weight:700; margin-bottom:8px; }
.jz-page__section-title{ font-weight:900; font-size:28px; margin-bottom:8px; }
.jz-page__cta{ padding:72px var(--gutter) 64px; text-align:center; border-top:1px solid var(--hair); margin:56px auto 0; max-width:1280px; }
.jz-page__cta-title{ font-weight:900; font-size:clamp(22px,3.4vw,32px); font-family:var(--font-en); margin-bottom:20px; }
.jz-page__cta-btn{ display:inline-block; border:1px solid var(--ink); color:var(--ink); padding:14px 36px; font-size:13px; letter-spacing:.1em; font-weight:700; }
.jz-page__cta-btn:hover{ background:var(--ink); color:#fff; }
.jz-page__foot{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:10px; padding:18px var(--gutter); border-top:1px solid var(--hair); font-size:10px; letter-spacing:.1em; color:#9a9689; margin-top:56px; }

/* Vision — 4 pillars */
.jz-pillar{ border-top:1px solid var(--hair); padding:36px 0; display:grid; grid-template-columns:180px 1fr; gap:32px; }
.jz-pillar:last-child{ border-bottom:1px solid var(--hair); }
.jz-pillar__name{ font-weight:900; font-size:28px; font-family:var(--font-en); }
.jz-pillar__body{ font-size:15px; line-height:2; color:var(--muted); max-width:600px; }
@media (max-width:680px){ .jz-pillar{ grid-template-columns:1fr; gap:12px; } }

/* About — company table & history */
.jz-history-list{ border-top:1px solid var(--hair); }
.jz-history-list__row{ display:flex; gap:40px; padding:20px 0; border-bottom:1px solid var(--hair); }
.jz-history-list__year{ font-weight:900; font-size:18px; width:100px; flex-shrink:0; font-family:var(--font-en); }
.jz-history-list__text{ font-size:15px; color:var(--muted); padding-top:2px; }
.jz-company-table{ display:grid; grid-template-columns:1fr 1fr; border-top:1px solid var(--hair); }
.jz-company-table__cell{ padding:22px 32px 22px 0; border-bottom:1px solid var(--hair); }
.jz-company-table__cell.r{ padding-left:32px; padding-right:0; border-left:1px solid var(--hair); }
.jz-company-table__lbl{ display:block; font-size:11px; letter-spacing:.1em; color:var(--muted); margin-bottom:8px; }
.jz-company-table__val{ display:block; font-size:15px; }
@media (max-width:680px){
  .jz-company-table{ grid-template-columns:1fr; }
  .jz-company-table__cell.r{ border-left:0; padding-left:0; }
}

/* Service-DX — support rows & flow steps */
.jz-support-row{ border-top:1px solid var(--hair); padding:22px 0; display:flex; flex-wrap:wrap; align-items:baseline; gap:16px 28px; }
.jz-support-row:last-child{ border-bottom:1px solid var(--hair); }
.jz-support-row__name{ font-weight:900; font-size:20px; font-family:var(--font-en); width:280px; flex-shrink:0; }
.jz-support-row__desc{ font-size:13px; color:var(--muted); }
.jz-flow-step{ border-top:1px solid var(--hair); padding:26px 0; display:grid; grid-template-columns:70px 1fr; gap:20px; }
.jz-flow-step:last-child{ border-bottom:1px solid var(--hair); }
.jz-flow-step__num{ font-weight:900; font-size:28px; color:var(--muted); font-family:var(--font-en); }
.jz-flow-step__title{ font-weight:900; font-size:17px; margin-bottom:6px; }
.jz-flow-step__desc{ font-size:13px; color:var(--muted); }

/* Contact page — form */
.jz-contact-grid{ display:grid; grid-template-columns:1fr 1.4fr; gap:56px; padding:104px var(--gutter) 80px; max-width:1280px; margin:0 auto; }
.jz-contact-info{ font-size:15px; line-height:2.2; color:var(--muted); }
.jz-contact-map{ margin-top:28px; width:100%; aspect-ratio:4/3; border:1px solid #ddd9cc; }
.jz-contact-map iframe{ width:100%; height:100%; border:0; display:block; filter:grayscale(1) contrast(1.02); }
.jz-contact-map--empty{ background:repeating-linear-gradient(135deg,#f2f1ec,#f2f1ec 9px,#e8e5db 9px,#e8e5db 18px); display:flex; align-items:center; justify-content:center; font-size:10px; letter-spacing:.08em; color:#8b8778; font-weight:700; }
.jz-field{ margin-bottom:20px; }
.jz-field__label{ display:block; font-size:12px; font-weight:700; margin-bottom:8px; }
.jz-field__req{ font-size:10px; color:#fff; background:var(--ink); padding:2px 7px; margin-left:8px; letter-spacing:.05em; }
.jz-field input[type=text],.jz-field input[type=email],.jz-field input[type=tel],.jz-field textarea,.jz-field select{
  width:100%; box-sizing:border-box; border:1px solid var(--hair); padding:12px 14px; font-size:14px; font-family:var(--font-jp); color:var(--ink); background:#fff;
}
.jz-field textarea{ min-height:120px; resize:vertical; }
.jz-field-row{ display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.jz-radio-group{ display:flex; flex-wrap:wrap; gap:10px; }
.jz-radio-group label{ font-size:12px; border:1px solid var(--hair); color:var(--muted); padding:8px 16px; cursor:pointer; }
.jz-radio-group input{ margin-right:6px; }
.jz-consent{ display:flex; align-items:center; gap:10px; margin-bottom:26px; font-size:12px; color:var(--muted); }
.jz-submit-btn{ display:inline-block; background:var(--ink); color:#fff; padding:16px 48px; font-size:13px; letter-spacing:.1em; font-weight:700; border:0; cursor:pointer; font-family:var(--font-jp); }
.jz-submit-btn:hover{ opacity:.85; }
.jz-form-notice{ padding:16px 20px; margin-bottom:24px; font-size:13px; border:1px solid var(--hair); }
.jz-form-notice--error{ border-color:#c0392b; color:#c0392b; }
@media (max-width:860px){ .jz-contact-grid{ grid-template-columns:1fr; } .jz-field-row{ grid-template-columns:1fr; } }

/* Thanks / 404 centered */
.jz-center-page{ min-height:70svh; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:64px var(--gutter); }
.jz-center-page__check{ width:64px; height:64px; border:1px solid var(--ink); border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:24px; margin-bottom:32px; }
.jz-center-page__num{ font-weight:900; font-size:clamp(72px,16vw,120px); line-height:1; font-family:var(--font-en); letter-spacing:-.02em; }
.jz-center-page__title{ margin-top:20px; font-weight:900; font-size:22px; }
.jz-center-page__body{ margin-top:16px; font-size:13px; line-height:1.9; color:var(--muted); max-width:480px; }

/* WORKS一覧 タグ絞り込み */
.jz-works-filters{ display:flex; flex-wrap:wrap; gap:10px; }
.jz-works-filters button{ font-size:11px; letter-spacing:.06em; color:var(--muted); padding:5px 12px; border:1px solid var(--hair); background:none; cursor:pointer; font-family:var(--font-jp); }
.jz-works-filters button.is-active{ color:#fff; background:var(--ink); border-color:var(--ink); }

/* WORKS一覧 正方形グリッド3列 */
#jz-works-list{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:40px 24px;
}
.jzw1-row{
  display:flex;
  flex-direction:column;
  text-decoration:none;
}
.jzw1-thumb{
  width:100%;
  aspect-ratio:1/1;
  overflow:hidden;
  background:#f4f2ec;
  border:1px solid #ddd9cc;
}
.jzw1-thumb img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  transition:transform .5s ease;
}
.jzw1-row:hover .jzw1-thumb img{
  transform:scale(1.05);
}
.jzw1-meta{
  margin-top:16px;
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:12px;
}
.jzw1-title{
  font-weight:900;
  font-size:17px;
  font-family:var(--font-en);
  color:var(--ink);
  line-height:1.3;
}
.jzw1-caption{
  font-size:11px;
  color:var(--muted);
  white-space:nowrap;
}
@media (max-width: 900px){
  #jz-works-list{ grid-template-columns:repeat(2, 1fr); gap:32px 20px; }
}
@media (max-width: 480px){
  #jz-works-list{ grid-template-columns:1fr; gap:32px; }
}

/* WORKS詳細 */
.jz-work-hero{ margin:32px var(--gutter) 0; max-width:1280px; margin-left:auto; margin-right:auto; }
.jz-work-hero img{ width:100%; aspect-ratio:16/9; object-fit:cover; border:1px solid #ddd9cc; }
.jz-work-hero--browser{ border:1px solid #ddd9cc; border-radius:12px; overflow:hidden; background:#fff; box-shadow:0 24px 60px -32px rgba(20,20,20,.35); }
.jz-work-hero--browser .jz-browser-chrome{ display:flex; align-items:center; gap:7px; padding:12px 16px; background:#f1f0ea; border-bottom:1px solid #ddd9cc; }
.jz-work-hero--browser .jz-browser-dot{ width:11px; height:11px; border-radius:50%; display:inline-block; flex:0 0 auto; }
.jz-work-hero--browser .jz-browser-url{ margin-left:10px; font-size:12px; color:#8a8a80; background:#fff; border:1px solid #ddd9cc; border-radius:999px; padding:5px 16px; flex:1; max-width:360px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.jz-work-hero--browser img{ border:none; }
.jz-work-body-grid{ display:grid; grid-template-columns:1fr 1fr; gap:56px; padding:48px var(--gutter) 0; max-width:1280px; margin:0 auto; }
.jz-work-overview{ font-size:14px; line-height:2; color:var(--muted); max-width:480px; }
.jz-credit-row{ display:flex; justify-content:space-between; max-width:420px; border-top:1px solid var(--hair); padding:10px 0; font-size:13px; color:var(--muted); }
.jz-credit-row:last-child{ border-bottom:1px solid var(--hair); }
.jz-credit-row span:last-child{ color:var(--ink); }
.jz-work-subphotos{ display:grid; grid-template-columns:1fr 1fr; gap:16px; padding:48px var(--gutter) 0; max-width:1280px; margin:0 auto; }
.jz-work-subphotos img{ width:100%; aspect-ratio:4/3; object-fit:cover; border:1px solid #ddd9cc; }
.jz-prevnext{ display:flex; justify-content:space-between; align-items:center; padding:28px var(--gutter); margin-top:48px; border-top:1px solid var(--hair); max-width:1280px; margin-left:auto; margin-right:auto; font-size:11px; letter-spacing:.1em; color:var(--muted); }
.jz-prevnext a:hover{ color:var(--ink); }
@media (max-width:860px){ .jz-work-body-grid,.jz-work-subphotos{ grid-template-columns:1fr; } }

/* ==========================================================================
   Mobile quick tabbar (TEL / CONTACT / WORKS)
   ========================================================================== */
.jz-mobile-tabbar{ display:none; }
@media (max-width:780px){
  .jz-mobile-tabbar{
    display:flex; position:fixed; left:0; right:0; bottom:0; z-index:55;
    background:#3a3834; border-top:1px solid rgba(255,255,255,.15);
    padding-bottom:env(safe-area-inset-bottom);
  }
  .jz-mobile-tabbar__item{
    flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center;
    gap:4px; padding:9px 0 8px; color:#fff; font-size:10px; font-weight:700; letter-spacing:.04em;
  }
  .jz-mobile-tabbar__item + .jz-mobile-tabbar__item{ border-left:1px solid rgba(255,255,255,.15); }
  .jz-mobile-tabbar__icon{ width:21px; height:21px; }
  .jz-mobile-tabbar__icon svg{ width:100%; height:100%; display:block; }
  body{ padding-bottom:60px; }
}

/* ==========================================================================
   モバイル: 上に戻るボタン
   ========================================================================== */
.jz-back-to-top{
  display:flex;
  position:fixed;
  right:16px;
  bottom:24px;
  z-index:56;
  width:44px; height:44px;
  border-radius:50%;
  background:var(--ink);
  color:#fff;
  border:0;
  align-items:center; justify-content:center;
  opacity:0;
  transform:translateY(8px);
  pointer-events:none;
  transition:opacity .25s ease, transform .25s ease;
  cursor:pointer;
}
.jz-back-to-top svg{ width:20px; height:20px; }
.jz-back-to-top.is-visible{ opacity:1; transform:translateY(0); pointer-events:auto; }
@media (max-width: 780px){
  .jz-back-to-top{ bottom:76px; }
}

/* ==========================================================================
   スクロール連動フェードイン
   ========================================================================== */
.jz-reveal{
  opacity:0;
  transform:translateY(28px);
  transition:opacity .7s ease, transform .7s ease;
}
.jz-reveal.is-visible{
  opacity:1;
  transform:translateY(0);
}
@media (prefers-reduced-motion: reduce){
  .jz-reveal{ opacity:1; transform:none; transition:none; }
}
.no-js .jz-reveal{ opacity:1; transform:none; }