/* ============================================================
   KORIKI MEDIA PRODUCTION — Official Site
   Design System: "Cinematic Dark / Film Warmth"
   ============================================================ */

/* ---------- Tokens ---------- */
:root{
  --bg:        #0C0A08;
  --bg-2:      #131008;
  --bg-3:      #1A1611;
  --bg-card:   #15120E;
  --paper:     #F2EAD9;
  --paper-hi:  #FBF6EA;
  --muted:     #A89C88;
  --muted-2:   #6E6657;
  --accent:    #C98F52;
  --accent-2:  #9C6B48;
  --line:      rgba(242,234,217,.13);
  --line-soft: rgba(242,234,217,.07);
  --rec:       #E25C4A;

  --font-en:   "Space Grotesk", "Zen Kaku Gothic New", sans-serif;
  --font-jp:   "Zen Kaku Gothic New", "Hiragino Kaku Gothic ProN", sans-serif;
  --font-serif:"Shippori Mincho B1", Georgia, "Times New Roman", "Hiragino Mincho ProN", serif;

  --w-max:     1240px;
  --pad:       clamp(20px, 4vw, 56px);
  --radius:    2px;
  --ease:      cubic-bezier(.22,1,.36,1);
}

/* ---------- Reset ---------- */
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{
  scroll-behavior:smooth;
  /* 横はみ出しはhtml側でクリップ（bodyに置くとiOSでヘッダー固定が壊れる） */
  overflow-x:clip;
}
body{
  background:var(--bg);
  color:var(--paper);
  font-family:var(--font-jp);
  font-size:15px;
  line-height:1.9;
  letter-spacing:.04em;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul,ol{ list-style:none; }
button{ font:inherit; color:inherit; background:none; border:none; cursor:pointer; }
::selection{ background:var(--accent); color:#0C0A08; }
::-webkit-scrollbar{ width:10px; }
::-webkit-scrollbar-track{ background:var(--bg); }
::-webkit-scrollbar-thumb{ background:#2E2820; border-radius:5px; }

/* ---------- Page enter ---------- */
@keyframes pageIn{ from{ opacity:0; } to{ opacity:1; } }
body{ animation:pageIn .7s var(--ease) both; }

/* ---------- Film grain overlay ---------- */
.grain{
  position:fixed; inset:-100px; z-index:2000; pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
  opacity:.05;
  animation:grainShift 1.2s steps(4) infinite;
}
@keyframes grainShift{
  0%{ transform:translate(0,0); }
  25%{ transform:translate(-30px,20px); }
  50%{ transform:translate(20px,-25px); }
  75%{ transform:translate(-15px,-10px); }
  100%{ transform:translate(0,0); }
}
@media (prefers-reduced-motion: reduce){
  .grain{ animation:none; }
  html{ scroll-behavior:auto; }
}

/* ---------- Layout helpers ---------- */
.wrap{ max-width:var(--w-max); margin:0 auto; padding-left:var(--pad); padding-right:var(--pad); }
.section{ padding:clamp(80px,10vw,140px) 0; position:relative; }
.section--tight{ padding:clamp(56px,7vw,90px) 0; }
.section--line{ border-top:1px solid var(--line-soft); }

/* EN label + JP title heading set */
.sec-head{ margin-bottom:clamp(36px,5vw,64px); }
.sec-label{
  font-family:var(--font-en);
  font-size:11px; font-weight:500;
  letter-spacing:.42em; text-transform:uppercase;
  color:var(--accent);
  display:flex; align-items:center; gap:14px;
  margin-bottom:18px;
}
.sec-label::before{ content:""; width:36px; height:1px; background:var(--accent); }
.sec-title{
  font-family:var(--font-serif);
  font-weight:600;
  font-size:clamp(26px,4vw,44px);
  line-height:1.5; letter-spacing:.06em;
}
.sec-lead{ margin-top:20px; color:var(--muted); max-width:680px; font-size:14.5px; }

/* ---------- Buttons ---------- */
.btn{
  position:relative; display:inline-flex; align-items:center; gap:14px;
  font-family:var(--font-en); font-size:12px; font-weight:500;
  letter-spacing:.28em; text-transform:uppercase;
  padding:18px 34px;
  border:1px solid var(--paper);
  color:var(--paper);
  overflow:hidden; isolation:isolate;
  transition:color .45s var(--ease), border-color .45s var(--ease);
}
.btn::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:var(--paper);
  transform:scaleX(0); transform-origin:left;
  transition:transform .45s var(--ease);
}
.btn:hover{ color:var(--bg); }
.btn:hover::before{ transform:scaleX(1); }
.btn .ar{ transition:transform .45s var(--ease); }
.btn:hover .ar{ transform:translateX(5px); }
.btn--accent{ border-color:var(--accent); color:var(--accent); }
.btn--accent::before{ background:var(--accent); }
.btn--accent:hover{ color:#0C0A08; }
.btn--s{ padding:13px 24px; font-size:11px; }

.textlink{
  font-family:var(--font-en); font-size:12px; letter-spacing:.3em; text-transform:uppercase;
  color:var(--accent); display:inline-flex; align-items:center; gap:10px;
  border-bottom:1px solid transparent; padding-bottom:4px;
  transition:border-color .3s, gap .3s;
}
.textlink:hover{ border-color:var(--accent); gap:16px; }

/* ---------- Header ---------- */
.header{
  position:fixed; top:0; left:0; right:0; z-index:1000;
  transition:background .5s var(--ease), border-color .5s var(--ease), backdrop-filter .5s;
  border-bottom:1px solid transparent;
}
.header.is-scrolled{
  background:rgba(12,10,8,.82);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border-bottom-color:var(--line-soft);
}
/* タッチ端末：fixed＋backdrop-filterはiOS Safariでスクロール時にヘッダーが揺れるため、
   ぼかしをやめて不透明背景にする（固定が完全に安定する） */
@media (hover:none){
  .header.is-scrolled{
    background:rgba(12,10,8,.97);
    backdrop-filter:none;
    -webkit-backdrop-filter:none;
  }
}
.header__in{
  max-width:1400px; margin:0 auto;
  padding:0 clamp(20px,3vw,40px);
  height:78px;
  display:flex; align-items:center; justify-content:space-between; gap:24px;
}
.brand{ display:flex; align-items:center; gap:14px; flex-shrink:0; }
.brand__mark{
  width:34px; height:34px; flex-shrink:0;
  border:1px solid var(--accent);
  display:grid; place-items:center;
  font-family:var(--font-en); font-weight:700; font-size:15px; color:var(--accent);
  letter-spacing:0;
}
.brand__txt{
  font-family:var(--font-en); font-weight:700;
  font-size:13.5px; letter-spacing:.22em; line-height:1.45;
}
.brand__txt small{
  display:block; font-weight:400; font-size:8.5px; letter-spacing:.4em; color:var(--muted);
}
.gnav{ display:flex; align-items:center; gap:clamp(18px,2.4vw,34px); }
.gnav a:not(.btn){
  font-family:var(--font-en); font-size:11.5px; font-weight:500;
  letter-spacing:.24em; text-transform:uppercase;
  color:var(--muted); position:relative; padding:6px 0;
  transition:color .3s;
}
.gnav a:not(.btn):hover{ color:var(--paper); }
.gnav a[aria-current="page"]{ color:var(--paper); }
.gnav a:not(.btn)::after{
  content:""; position:absolute; left:0; bottom:0; height:1px; width:100%;
  background:var(--accent); transform:scaleX(0); transform-origin:left;
  transition:transform .35s var(--ease);
}
.gnav a:not(.btn):hover::after,
.gnav a[aria-current="page"]::after{ transform:scaleX(1); }
.gnav .btn{ padding:11px 20px; font-size:10.5px; }

/* Hamburger */
.menu-btn{
  display:none; z-index:1102;
  width:48px; height:48px; position:relative;
}
.menu-btn span{
  position:absolute; left:12px; right:12px; height:1.5px; background:var(--paper);
  transition:transform .4s var(--ease), opacity .3s, top .4s var(--ease);
}
.menu-btn span:nth-child(1){ top:18px; }
.menu-btn span:nth-child(2){ top:24px; }
.menu-btn span:nth-child(3){ top:30px; }
body.nav-open .menu-btn span:nth-child(1){ top:24px; transform:rotate(45deg); }
body.nav-open .menu-btn span:nth-child(2){ opacity:0; }
body.nav-open .menu-btn span:nth-child(3){ top:24px; transform:rotate(-45deg); }

/* Mobile overlay nav */
.mnav{
  position:fixed; inset:0; z-index:1100;
  background:rgba(12,10,8,.97);
  backdrop-filter:blur(8px);
  display:flex; flex-direction:column; justify-content:flex-start;
  padding:max(92px, calc(env(safe-area-inset-top) + 80px)) 9vw calc(env(safe-area-inset-bottom) + 44px);
  overflow-y:auto;                       /* メニュー自体をスクロール可能に */
  -webkit-overflow-scrolling:touch;
  overscroll-behavior:contain;           /* 背面へのスクロール連鎖を遮断 */
  opacity:0; visibility:hidden; transition:opacity .45s var(--ease), visibility .45s;
}
body.nav-open{ overflow:hidden; }        /* フォールバック（本命はJSのスクロールロック） */

/* メニュー内の閉じるボタン（✗）— JSが自動挿入 */
.mnav__close{
  position:fixed; z-index:1110;
  top:max(14px, env(safe-area-inset-top)); right:16px;
  width:50px; height:50px;
  display:grid; place-items:center;
  border:1px solid var(--line); border-radius:2px;
  background:rgba(12,10,8,.7);
  color:var(--paper); font-size:26px; line-height:1;
  font-family:var(--font-en);
  opacity:0; visibility:hidden; transform:scale(.9);
  transition:opacity .4s var(--ease), visibility .4s, transform .4s var(--ease), border-color .3s, color .3s;
}
body.nav-open .mnav__close{ opacity:1; visibility:visible; transform:none; }
.mnav__close:hover{ border-color:var(--accent); color:var(--accent); }
body.nav-open .mnav{ opacity:1; visibility:visible; }
.mnav a{
  flex-shrink:0;
  font-family:var(--font-en); font-weight:500;
  font-size:clamp(23px,6vw,34px); letter-spacing:.12em; text-transform:uppercase;
  padding:13px 0; color:var(--paper);
  border-bottom:1px solid var(--line-soft);
  display:flex; justify-content:space-between; align-items:baseline;
  transform:translateY(24px); opacity:0;
  transition:transform .55s var(--ease), opacity .55s;
}
.mnav a small{ font-size:11px; letter-spacing:.3em; color:var(--muted); }
body.nav-open .mnav a{ transform:translateY(0); opacity:1; }
.mnav a:nth-child(1){ transition-delay:.08s; } .mnav a:nth-child(2){ transition-delay:.13s; }
.mnav a:nth-child(3){ transition-delay:.18s; } .mnav a:nth-child(4){ transition-delay:.23s; }
.mnav a:nth-child(5){ transition-delay:.28s; } .mnav a:nth-child(6){ transition-delay:.33s; }
.mnav a:nth-child(7){ transition-delay:.38s; }
.mnav__foot{ margin-top:32px; display:flex; flex-wrap:wrap; align-items:center; gap:18px 24px; color:var(--muted); font-size:12px; letter-spacing:.2em; flex-shrink:0; }
.mnav__foot a{ all:unset; cursor:pointer; color:var(--muted); font-family:var(--font-en); text-transform:uppercase; font-size:11px; letter-spacing:.25em; border-bottom:1px solid var(--line); padding-bottom:3px; }

@media (max-width: 1020px){
  .gnav{ display:none; }
  .menu-btn{ display:block; }
}
@media (min-width: 1021px){ .mnav{ display:none; } }

/* ---------- HERO (top) ---------- */
.hero{
  position:relative; min-height:100svh;
  display:flex; align-items:flex-end;
  overflow:hidden;
  clip-path:inset(0); /* iOS Safari: 動画レイヤーがセクション外（下のフッター等）へはみ出すのを強制クリップ */
}
.hero__bg{ position:absolute; inset:0; }
.hero__bg img{
  width:100%; height:100%; object-fit:cover;
  opacity:.5;
  animation:kenburns 24s var(--ease) infinite alternate;
  filter:saturate(.85) contrast(1.04);
  transition:opacity 1.4s var(--ease);
}
@keyframes kenburns{
  from{ transform:scale(1) translateY(0); }
  to{ transform:scale(1.09) translateY(-2%); }
}
.hero__bg::after{
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(12,10,8,.62) 0%, rgba(12,10,8,.18) 38%, rgba(12,10,8,.82) 78%, var(--bg) 100%),
    radial-gradient(120% 90% at 78% 12%, transparent 40%, rgba(12,10,8,.55) 100%);
}
/* letterbox bars */
.hero::before,.hero::after{
  content:""; position:absolute; left:0; right:0; height:clamp(28px,4.5vh,48px);
  background:var(--bg); z-index:5;
}
.hero::before{ top:0; } .hero::after{ bottom:0; }

.hero__in{
  position:relative; z-index:6; width:100%;
  max-width:1400px; margin:0 auto;
  padding:0 clamp(20px,4vw,56px) clamp(86px,13vh,140px);
}
.hero__meta{
  display:flex; flex-wrap:wrap; gap:22px; align-items:center;
  font-family:var(--font-en); font-size:10.5px; letter-spacing:.34em; text-transform:uppercase;
  color:var(--muted); margin-bottom:30px;
}
.hero__meta .rec{ display:inline-flex; align-items:center; gap:8px; color:var(--paper); }
.hero__meta .rec i{
  width:8px; height:8px; border-radius:50%; background:var(--rec);
  animation:blink 1.6s infinite;
}
@keyframes blink{ 0%,100%{ opacity:1; } 50%{ opacity:.18; } }
.hero h1{
  font-family:var(--font-serif); font-weight:600;
  font-size:clamp(38px,7.2vw,92px);
  line-height:1.32; letter-spacing:.04em;
}
.hero h1 .l{ display:block; overflow:hidden; }
.hero h1 .l span{ display:block; transform:translateY(110%); animation:lineUp 1.1s var(--ease) forwards; }
.hero h1 .l:nth-child(2) span{ animation-delay:.18s; }
.hero h1 .l:nth-child(3) span{ animation-delay:.36s; }
@keyframes lineUp{ to{ transform:translateY(0); } }
.hero__sub{
  margin-top:28px; max-width:560px;
  color:var(--muted); font-size:14.5px; line-height:2.1;
  opacity:0; animation:fadeUp 1s var(--ease) .65s forwards;
}
.hero__cta{
  margin-top:42px; display:flex; flex-wrap:wrap; gap:18px;
  opacity:0; animation:fadeUp 1s var(--ease) .85s forwards;
}
@keyframes fadeUp{ from{ opacity:0; transform:translateY(22px); } to{ opacity:1; transform:none; } }
.hero__side{
  position:absolute; z-index:6; right:clamp(20px,3.4vw,44px); bottom:clamp(86px,13vh,140px);
  display:flex; flex-direction:column; gap:10px; align-items:flex-end;
  font-family:var(--font-en); font-size:10px; letter-spacing:.3em; text-transform:uppercase;
  color:var(--muted);
}
.hero__side b{ color:var(--paper); font-weight:500; }
.hero__scroll{
  position:absolute; z-index:6; left:50%; bottom:8px; transform:translateX(-50%);
  font-family:var(--font-en); font-size:9px; letter-spacing:.5em; text-transform:uppercase;
  color:var(--muted); padding-bottom:6px;
}
.hero__scroll::after{
  content:""; display:block; width:1px; height:34px; margin:10px auto 0;
  background:linear-gradient(var(--accent), transparent);
  animation:scrollHint 2s var(--ease) infinite;
}
@keyframes scrollHint{ 0%{ transform:scaleY(0); transform-origin:top; } 55%{ transform:scaleY(1); transform-origin:top; } 56%{ transform-origin:bottom; } 100%{ transform:scaleY(0); transform-origin:bottom; } }
@media (max-width:760px){ .hero__side{ display:none; } }

/* Page hero (sub pages) */
.phero{
  position:relative; padding:calc(78px + clamp(64px,9vw,120px)) 0 clamp(52px,7vw,88px);
  border-bottom:1px solid var(--line-soft);
  overflow:hidden;
}
.phero::before{
  content:attr(data-bgword);
  position:absolute; right:-1%; bottom:-6%;
  font-family:var(--font-en); font-weight:700;
  font-size:clamp(90px,17vw,250px); letter-spacing:.02em; line-height:1;
  color:transparent; -webkit-text-stroke:1px rgba(242,234,217,.07);
  pointer-events:none; white-space:nowrap;
}
.phero__crumb{
  font-family:var(--font-en); font-size:10.5px; letter-spacing:.3em; text-transform:uppercase;
  color:var(--muted); margin-bottom:26px; display:flex; gap:12px; align-items:center;
}
.phero__crumb a{ color:var(--muted); transition:color .3s; }
.phero__crumb a:hover{ color:var(--accent); }
.phero__crumb span{ color:var(--accent); }
.phero h1{
  font-family:var(--font-serif); font-weight:600;
  font-size:clamp(32px,5.6vw,62px); line-height:1.4; letter-spacing:.05em;
}
.phero p{ margin-top:22px; color:var(--muted); max-width:640px; font-size:14.5px; }

/* ---------- Marquee ---------- */
.marquee{
  border-top:1px solid var(--line-soft); border-bottom:1px solid var(--line-soft);
  padding:22px 0; overflow:hidden; white-space:nowrap;
  background:var(--bg-2);
}
.marquee__track{ display:inline-flex; gap:0; animation:marq 40s linear infinite; }
.marquee span{
  font-family:var(--font-en); font-weight:500;
  font-size:13px; letter-spacing:.34em; text-transform:uppercase;
  color:var(--muted); padding:0 28px;
  display:inline-flex; align-items:center; gap:28px;
}
.marquee span::after{ content:"◆"; font-size:7px; color:var(--accent); }
@keyframes marq{ to{ transform:translateX(-50%); } }

/* ---------- Reveal ---------- */
.rv{ opacity:0; transform:translateY(34px); transition:opacity 1s var(--ease), transform 1s var(--ease); }
.rv.is-in{ opacity:1; transform:none; }
.rv-d1{ transition-delay:.1s; } .rv-d2{ transition-delay:.2s; } .rv-d3{ transition-delay:.3s; } .rv-d4{ transition-delay:.4s; }
.rv-img{ overflow:hidden; position:relative; }
.rv-img::after{
  content:""; position:absolute; inset:0; background:var(--bg);
  transform:scaleY(1); transform-origin:bottom;
  transition:transform 1.1s var(--ease);
}
.rv-img.is-in::after{ transform:scaleY(0); }
.rv-img img{ transform:scale(1.12); transition:transform 1.4s var(--ease); }
.rv-img.is-in img{ transform:scale(1); }

/* ---------- Statement / About teaser ---------- */
.statement{
  font-family:var(--font-serif); font-weight:600;
  font-size:clamp(22px,3.3vw,36px); line-height:2; letter-spacing:.08em;
}
.statement em{ font-style:normal; color:var(--accent); }
.kv-grid{ display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(36px,6vw,90px); align-items:center; }
@media (max-width:880px){ .kv-grid{ grid-template-columns:1fr; } }
.kv-grid figure{ position:relative; }
.kv-grid figure img{ aspect-ratio:4/5; object-fit:cover; width:100%; filter:saturate(.9); }
.kv-grid figcaption{
  position:absolute; left:14px; bottom:14px;
  font-family:var(--font-en); font-size:9.5px; letter-spacing:.3em; text-transform:uppercase;
  color:rgba(242,234,217,.85); background:rgba(12,10,8,.55); padding:7px 12px;
  backdrop-filter:blur(4px);
}
.keywords{ display:flex; flex-wrap:wrap; gap:10px; margin-top:30px; }
.keywords li{
  font-family:var(--font-en); font-size:10.5px; letter-spacing:.26em; text-transform:uppercase;
  border:1px solid var(--line); color:var(--muted); padding:9px 16px;
}

/* ---------- Works ---------- */
.works-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(24px,3.4vw,48px) clamp(20px,3vw,40px); }
@media (max-width:760px){ .works-grid{ grid-template-columns:1fr; } }
.work-card{ display:block; }
.work-card__thumb{
  position:relative; aspect-ratio:16/9; overflow:hidden; background:var(--bg-3);
}
.work-card__thumb img{
  width:100%; height:100%; object-fit:cover;
  filter:saturate(.82) contrast(1.02);
  transition:transform .9s var(--ease), filter .9s var(--ease);
}
.work-card:hover .work-card__thumb img{ transform:scale(1.06); filter:saturate(1) contrast(1.05); }
.work-card__thumb::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, transparent 55%, rgba(12,10,8,.55));
  opacity:.8; transition:opacity .6s;
}
.work-card__play{
  position:absolute; right:16px; bottom:16px; z-index:2;
  width:52px; height:52px; border-radius:50%;
  border:1px solid rgba(242,234,217,.65);
  display:grid; place-items:center;
  background:rgba(12,10,8,.4); backdrop-filter:blur(4px);
  transition:background .4s, border-color .4s, transform .4s var(--ease);
}
.work-card__play svg{ width:14px; height:14px; fill:var(--paper); margin-left:2px; transition:fill .4s; }
.work-card:hover .work-card__play{ background:var(--accent); border-color:var(--accent); transform:scale(1.08); }
.work-card:hover .work-card__play svg{ fill:#0C0A08; }
.work-card__badge{
  position:absolute; left:0; top:14px; z-index:2;
  font-family:var(--font-en); font-size:9.5px; font-weight:500; letter-spacing:.26em; text-transform:uppercase;
  background:var(--accent); color:#0C0A08; padding:7px 14px 7px 16px;
}
.work-card__meta{
  display:flex; gap:14px; align-items:center; margin-top:18px;
  font-family:var(--font-en); font-size:10px; letter-spacing:.28em; text-transform:uppercase; color:var(--muted);
}
.work-card__meta b{ color:var(--accent); font-weight:500; }
.work-card h3{
  margin-top:10px; font-family:var(--font-serif); font-weight:600;
  font-size:clamp(17px,1.8vw,21px); line-height:1.6; letter-spacing:.05em;
  transition:color .3s;
}
.work-card:hover h3{ color:var(--accent); }
.work-card p{ margin-top:8px; color:var(--muted); font-size:13px; line-height:1.9; }

/* Feature (large) work */
.work-feature{
  display:grid; grid-template-columns:1.25fr .75fr; gap:clamp(28px,4vw,56px);
  align-items:end; margin-bottom:clamp(48px,6vw,80px);
}
@media (max-width:880px){ .work-feature{ grid-template-columns:1fr; align-items:start; } }
.work-feature .work-card__thumb{ aspect-ratio:16/9; }
.work-feature h3{ font-family:var(--font-serif); font-size:clamp(22px,2.6vw,32px); font-weight:600; line-height:1.6; }
.award-tag{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--font-en); font-size:10px; letter-spacing:.3em; text-transform:uppercase;
  color:var(--accent); border:1px solid rgba(201,143,82,.45); padding:9px 16px; margin-bottom:18px;
}
.award-tag::before{ content:"◆"; font-size:7px; }

/* Filters */
.filters{ display:flex; flex-wrap:wrap; gap:10px; margin-bottom:clamp(32px,4vw,52px); }
.filters button{
  font-family:var(--font-en); font-size:10.5px; font-weight:500; letter-spacing:.24em; text-transform:uppercase;
  padding:11px 20px; border:1px solid var(--line); color:var(--muted);
  transition:all .35s var(--ease);
}
.filters button:hover{ border-color:var(--accent); color:var(--accent); }
.filters button.is-active{ background:var(--accent); border-color:var(--accent); color:#0C0A08; }
.work-item.is-hide{ display:none; }

/* Photo gallery */
.pgrid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:18px;
}
.pgrid a{
  display:block; overflow:hidden; position:relative;
}
.pgrid img{
  display:block; width:100%; height:auto;
  transition:transform .6s var(--ease);
}
.pgrid a:hover img{ transform:scale(1.03); }

/* ---------- Stats ---------- */
.stats{ display:grid; grid-template-columns:repeat(4,1fr); border:1px solid var(--line-soft); }
@media (max-width:880px){ .stats{ grid-template-columns:repeat(2,1fr); } }
.stat{
  padding:clamp(28px,3.6vw,48px) clamp(20px,2.6vw,40px);
  border-right:1px solid var(--line-soft);
  position:relative;
}
.stat:last-child{ border-right:none; }
@media (max-width:880px){
  .stat:nth-child(2){ border-right:none; }
  .stat:nth-child(1),.stat:nth-child(2){ border-bottom:1px solid var(--line-soft); }
}
.stat__num{
  font-family:var(--font-en); font-weight:700;
  font-size:clamp(34px,4.6vw,58px); line-height:1.1; color:var(--paper-hi);
}
.stat__num small{ font-size:.42em; font-weight:500; color:var(--accent); letter-spacing:.1em; margin-left:6px; }
.stat__t{ margin-top:12px; font-size:13px; color:var(--muted); line-height:1.8; }
.stat__label{
  font-family:var(--font-en); font-size:9.5px; letter-spacing:.3em; text-transform:uppercase;
  color:var(--accent); margin-bottom:14px; display:block;
}
/* 和文入りの数値（例：静岡→全国）は明朝でサイズを抑え、はみ出しを防ぐ */
.stat__num--jp{
  font-family:var(--font-serif); font-weight:600;
  font-size:clamp(24px,2.9vw,38px); letter-spacing:.05em; line-height:1.4;
  padding-top:4px;
}
.stat__num--jp small{ font-family:var(--font-en); }

/* ---------- Service ---------- */
.svc-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line-soft); border:1px solid var(--line-soft); }
@media (max-width:980px){ .svc-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:620px){ .svc-grid{ grid-template-columns:1fr; } }
.svc{
  background:var(--bg); padding:clamp(26px,3vw,40px);
  position:relative; transition:background .5s var(--ease);
}
.svc:hover{ background:var(--bg-card); }
.svc__no{
  font-family:var(--font-en); font-size:10px; letter-spacing:.3em; color:var(--accent);
  display:block; margin-bottom:20px;
}
.svc h3{
  font-size:16.5px; font-weight:700; letter-spacing:.06em; line-height:1.6;
}
.svc h3 small{
  display:block; font-family:var(--font-en); font-weight:500; font-size:9.5px;
  letter-spacing:.28em; text-transform:uppercase; color:var(--muted); margin-top:7px;
}
.svc p{ margin-top:14px; font-size:13px; color:var(--muted); line-height:1.9; }

/* Flow */
.flow{ counter-reset:flow; display:grid; gap:1px; background:var(--line-soft); border:1px solid var(--line-soft); }
.flow__step{
  background:var(--bg); padding:clamp(28px,3.6vw,48px);
  display:grid; grid-template-columns:120px 1fr; gap:clamp(20px,3vw,48px);
  transition:background .5s;
}
.flow__step:hover{ background:var(--bg-card); }
@media (max-width:720px){ .flow__step{ grid-template-columns:1fr; gap:14px; } }
.flow__no{
  font-family:var(--font-en); font-weight:700; font-size:clamp(30px,3.4vw,44px);
  color:transparent; -webkit-text-stroke:1px var(--accent); line-height:1;
}
.flow__no small{
  display:block; -webkit-text-stroke:0; color:var(--accent);
  font-size:9.5px; font-weight:500; letter-spacing:.3em; text-transform:uppercase; margin-top:10px;
}
.flow__step h3{ font-family:var(--font-serif); font-weight:600; font-size:clamp(18px,2vw,23px); letter-spacing:.06em; }
.flow__step h3 small{ font-family:var(--font-en); font-size:10px; letter-spacing:.3em; text-transform:uppercase; color:var(--muted); margin-left:14px; font-weight:500; }
.flow__step p{ margin-top:12px; color:var(--muted); font-size:13.5px; max-width:660px; }
.flow__tags{ display:flex; flex-wrap:wrap; gap:8px; margin-top:16px; }
.flow__tags li{
  font-size:11px; letter-spacing:.06em; color:var(--muted);
  border:1px solid var(--line); padding:6px 12px;
}

/* ---------- Ethos / value cards ---------- */
.ethos{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(20px,2.6vw,36px); }
@media (max-width:880px){ .ethos{ grid-template-columns:1fr; } }
.ethos__card{
  border:1px solid var(--line-soft); padding:clamp(28px,3.2vw,44px);
  position:relative; background:var(--bg-2);
  transition:border-color .5s, transform .5s var(--ease);
}
.ethos__card:hover{ border-color:rgba(201,143,82,.4); transform:translateY(-6px); }
.ethos__card .no{
  font-family:var(--font-en); font-weight:700; font-size:13px; letter-spacing:.2em; color:var(--accent);
  display:block; margin-bottom:22px;
}
.ethos__card h3{ font-family:var(--font-serif); font-weight:600; font-size:20px; letter-spacing:.06em; line-height:1.6; }
.ethos__card h3 small{
  display:block; font-family:var(--font-en); font-size:9.5px; font-weight:500;
  letter-spacing:.3em; text-transform:uppercase; color:var(--muted); margin-top:8px;
}
.ethos__card p{ margin-top:16px; font-size:13.5px; color:var(--muted); }
.ethos__card ul{ margin-top:16px; display:grid; gap:8px; }
.ethos__card ul li{
  font-size:12.5px; color:var(--muted); padding-left:18px; position:relative; line-height:1.8;
}
.ethos__card ul li::before{ content:"—"; position:absolute; left:0; color:var(--accent); }

/* ---------- Before/After slider ---------- */
.ba{
  position:relative; aspect-ratio:16/9; overflow:hidden; user-select:none;
  border:1px solid var(--line-soft); background:var(--bg-3);
}
.ba img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; pointer-events:none; }
.ba__after{ clip-path:inset(0 0 0 50%); }
.ba__bar{
  position:absolute; top:0; bottom:0; left:50%; width:1px; background:var(--paper);
  z-index:3; pointer-events:none;
}
.ba__bar::after{
  content:"◂ ▸"; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  background:var(--paper); color:var(--bg); font-size:11px; letter-spacing:1px;
  padding:9px 12px; border-radius:30px; white-space:nowrap; font-family:var(--font-en);
}
.ba input[type=range]{
  position:absolute; inset:0; width:100%; height:100%;
  opacity:0; cursor:ew-resize; z-index:4; margin:0;
}
.ba__tag{
  position:absolute; z-index:3;
  font-family:var(--font-en); font-size:9.5px; letter-spacing:.22em; text-transform:uppercase;
  background:rgba(12,10,8,.6); color:var(--paper); padding:7px 12px; backdrop-filter:blur(4px);
  max-width:60%; line-height:1.5;
}
/* Beforeは左上・Afterは右下に対角配置（長い言語でも被らない） */
.ba__tag--l{ left:14px; top:14px; }
.ba__tag--r{ right:14px; bottom:14px; }
@media (max-width:760px){
  .ba__tag{ font-size:8.5px; padding:6px 9px; letter-spacing:.16em; }
}

/* ---------- Timeline ---------- */
.tl{ position:relative; padding-left:clamp(28px,4vw,56px); }
.tl::before{
  content:""; position:absolute; left:8px; top:6px; bottom:6px; width:1px;
  background:linear-gradient(var(--accent), var(--line) 70%);
}
.tl__item{ position:relative; padding-bottom:clamp(36px,4.6vw,60px); }
.tl__item:last-child{ padding-bottom:0; }
.tl__item::before{
  content:""; position:absolute; top:9px;
  left:calc(-1 * clamp(28px,4vw,56px) + 4px);
  width:9px; height:9px; border-radius:50%;
  background:var(--bg); border:1.5px solid var(--accent);
}
.tl__year{
  font-family:var(--font-en); font-weight:700; font-size:clamp(20px,2.4vw,28px);
  letter-spacing:.1em; color:var(--accent);
}
.tl__item h3{ margin-top:8px; font-family:var(--font-serif); font-weight:600; font-size:clamp(17px,1.9vw,21px); letter-spacing:.05em; line-height:1.7; }
.tl__item p{ margin-top:10px; color:var(--muted); font-size:13.5px; max-width:640px; }
.tl__item ul{ margin-top:10px; display:grid; gap:7px; }
.tl__item ul li{ color:var(--muted); font-size:13px; padding-left:18px; position:relative; }
.tl__item ul li::before{ content:"—"; position:absolute; left:0; color:var(--accent); }

/* ---------- Table (company profile) ---------- */
.dtable{ width:100%; border-collapse:collapse; border-top:1px solid var(--line-soft); }
.dtable th,.dtable td{
  padding:22px 8px; border-bottom:1px solid var(--line-soft);
  text-align:left; vertical-align:top; font-weight:400;
}
.dtable th{
  width:200px; color:var(--muted);
  font-family:var(--font-en); font-size:10.5px; letter-spacing:.28em; text-transform:uppercase;
  padding-top:26px;
}
.dtable td{ font-size:14px; line-height:2; }
@media (max-width:640px){
  .dtable th,.dtable td{ display:block; width:100%; }
  .dtable th{ border-bottom:none; padding-bottom:0; }
  .dtable td{ padding-top:8px; }
}

/* ---------- News ---------- */
.news-list{ border-top:1px solid var(--line-soft); }
.news-item{
  display:grid; grid-template-columns:150px 110px 1fr auto; gap:clamp(16px,2.6vw,40px);
  align-items:center; padding:22px 4px;
  border-bottom:1px solid var(--line-soft);
  transition:background .4s, padding-left .4s var(--ease);
}
.news-item:hover{ background:var(--bg-2); padding-left:14px; }
@media (max-width:760px){
  .news-item{
    grid-template-columns:auto 1fr; grid-template-rows:auto auto;
    gap:8px 14px; align-items:center; padding:18px 4px;
  }
  .news-item .news-item__cat{
    grid-column:2; justify-self:start; width:auto; max-width:none; padding:5px 12px;
  }
  .news-item .news-item__t{ grid-column:1 / -1; }
}
.news-item__date{
  font-family:var(--font-en); font-size:12px; letter-spacing:.18em; color:var(--muted);
}
.news-item__cat{
  font-family:var(--font-en); font-size:9px; letter-spacing:.26em; text-transform:uppercase;
  border:1px solid var(--line); color:var(--accent); padding:6px 0; text-align:center; max-width:110px; width:100%;
}
.news-item__t{ font-size:14.5px; letter-spacing:.05em; line-height:1.8; }
.news-item__ar{ color:var(--muted); font-family:var(--font-en); }
@media (max-width:760px){ .news-item__ar{ display:none; } }

/* News card grid (news page) */
.nblock{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(20px,2.8vw,36px); }
@media (max-width:980px){ .nblock{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:620px){ .nblock{ grid-template-columns:1fr; } }
.ncard{ display:block; }
.ncard__thumb{ aspect-ratio:16/9; overflow:hidden; background:var(--bg-3); position:relative; }
.ncard__thumb img{ width:100%; height:100%; object-fit:cover; filter:saturate(.85); transition:transform .8s var(--ease), filter .8s; }
.ncard:hover .ncard__thumb img{ transform:scale(1.05); filter:saturate(1); }
.ncard__meta{ display:flex; gap:14px; align-items:center; margin-top:16px; font-family:var(--font-en); font-size:10px; letter-spacing:.24em; text-transform:uppercase; color:var(--muted); }
.ncard__meta b{ color:var(--accent); font-weight:500; }
.ncard h3{ margin-top:9px; font-size:15.5px; font-weight:700; letter-spacing:.05em; line-height:1.7; transition:color .3s; }
.ncard:hover h3{ color:var(--accent); }
.ncard p{ margin-top:7px; font-size:12.5px; color:var(--muted); line-height:1.85; }

/* ---------- Founder ---------- */
.profile-grid{ display:grid; grid-template-columns:.92fr 1.08fr; gap:clamp(36px,6vw,90px); align-items:start; }
@media (max-width:880px){ .profile-grid{ grid-template-columns:1fr; } }
.profile-grid figure{ position:sticky; top:110px; }
@media (max-width:880px){ .profile-grid figure{ position:static; max-width:480px; } }
.profile-grid figure img{ width:100%; aspect-ratio:4/5; object-fit:cover; filter:saturate(.88); }
.profile-name{
  font-family:var(--font-serif); font-weight:600; font-size:clamp(30px,4vw,46px);
  letter-spacing:.08em; line-height:1.4;
}
.profile-name small{
  display:block; font-family:var(--font-en); font-weight:500; font-size:11px;
  letter-spacing:.4em; text-transform:uppercase; color:var(--accent); margin-top:14px;
}
.profile-role{ margin-top:18px; color:var(--muted); font-size:13px; letter-spacing:.1em; }
.profile-body{ margin-top:30px; display:grid; gap:22px; color:#CFC5B2; font-size:14.5px; }
.profile-body strong{ color:var(--paper-hi); font-weight:700; }

.quote{
  font-family:var(--font-serif); font-weight:600;
  font-size:clamp(20px,2.6vw,30px); line-height:2; letter-spacing:.08em;
  padding-left:clamp(20px,3vw,40px); border-left:1px solid var(--accent);
}
.quote small{ display:block; margin-top:18px; font-family:var(--font-en); font-size:10px; letter-spacing:.34em; text-transform:uppercase; color:var(--muted); }

/* Media logos/list */
.media-list{ display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:var(--line-soft); border:1px solid var(--line-soft); }
@media (max-width:720px){ .media-list{ grid-template-columns:1fr; } }
.media-item{ background:var(--bg); padding:clamp(24px,3vw,38px); transition:background .4s; }
.media-item:hover{ background:var(--bg-card); }
.media-item .y{ font-family:var(--font-en); font-size:10px; letter-spacing:.3em; color:var(--accent); display:block; margin-bottom:12px; }
.media-item h3{ font-size:15.5px; font-weight:700; letter-spacing:.05em; line-height:1.7; }
.media-item p{ margin-top:8px; font-size:12.5px; color:var(--muted); }

/* ---------- FAQ ---------- */
.faq{ border-top:1px solid var(--line-soft); }
.faq details{ border-bottom:1px solid var(--line-soft); }
.faq summary{
  cursor:pointer; list-style:none; padding:26px 44px 26px 4px;
  font-size:15px; font-weight:700; letter-spacing:.05em; position:relative;
  transition:color .3s;
}
.faq summary:hover{ color:var(--accent); }
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{
  content:"+"; position:absolute; right:10px; top:50%; transform:translateY(-50%);
  font-family:var(--font-en); font-size:20px; color:var(--accent); transition:transform .4s var(--ease);
}
.faq details[open] summary::after{ transform:translateY(-50%) rotate(45deg); }
.faq .a{ padding:0 4px 28px; color:var(--muted); font-size:13.5px; max-width:760px; }

/* ---------- CTA band ---------- */
.cta{
  position:relative; text-align:center;
  padding:clamp(90px,12vw,160px) 0;
  border-top:1px solid var(--line-soft);
  overflow:hidden; background:var(--bg-2);
}
.cta::before{
  content:"CONTACT"; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  font-family:var(--font-en); font-weight:700; font-size:clamp(100px,20vw,280px);
  letter-spacing:.04em; color:transparent; -webkit-text-stroke:1px rgba(242,234,217,.05);
  pointer-events:none; white-space:nowrap;
}
.cta__in{ position:relative; z-index:2; }
.cta h2{
  font-family:var(--font-serif); font-weight:600;
  font-size:clamp(26px,4.4vw,48px); line-height:1.7; letter-spacing:.08em;
}
.cta p{ margin-top:20px; color:var(--muted); font-size:14px; }
.cta .btn{ margin-top:40px; }
.cta__mail{
  margin-top:26px; font-family:var(--font-en); font-size:12px; letter-spacing:.2em; color:var(--muted);
}
.cta__mail a{ color:var(--accent); border-bottom:1px solid rgba(201,143,82,.4); padding-bottom:2px; }

/* ---------- Footer ---------- */
.footer{ border-top:1px solid var(--line-soft); padding:clamp(72px,9vw,120px) 0 40px; background:var(--bg); }
.footer__grid{
  display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:clamp(32px,5vw,72px);
  padding-bottom:clamp(40px,5vw,64px); border-bottom:1px solid var(--line-soft);
}
@media (max-width:880px){ .footer__grid{ grid-template-columns:1fr; } }
.footer__brand .brand__txt{ font-size:15px; }
.footer__brand p{ margin-top:20px; color:var(--muted); font-size:12.5px; max-width:380px; }
.footer h4{
  font-family:var(--font-en); font-size:10px; font-weight:500;
  letter-spacing:.36em; text-transform:uppercase; color:var(--accent); margin-bottom:20px;
}
.footer__nav{ display:grid; gap:12px; }
.footer__nav a{
  font-family:var(--font-en); font-size:12px; letter-spacing:.22em; text-transform:uppercase;
  color:var(--muted); transition:color .3s, padding-left .3s;
}
.footer__nav a:hover{ color:var(--paper); padding-left:6px; }
.footer__nav a span{ font-family:var(--font-jp); font-size:10.5px; letter-spacing:.1em; margin-left:10px; color:var(--muted-2); }
.footer__sns{ display:grid; gap:14px; }
.footer__sns a{ display:flex; align-items:center; gap:12px; color:var(--muted); font-size:12.5px; letter-spacing:.08em; transition:color .3s; }
.footer__sns a:hover{ color:var(--accent); }
.footer__sns svg{ width:17px; height:17px; fill:currentColor; flex-shrink:0; }
.footer__btm{
  padding-top:30px; display:flex; flex-wrap:wrap; gap:16px; justify-content:space-between; align-items:center;
  font-family:var(--font-en); font-size:9.5px; letter-spacing:.26em; text-transform:uppercase; color:var(--muted-2);
}
.totop{ font-family:var(--font-en); font-size:9.5px; letter-spacing:.3em; color:var(--muted); transition:color .3s; }
.totop:hover{ color:var(--accent); }

/* ---------- Lightbox ---------- */
.lb{
  position:fixed; inset:0; z-index:3000; display:none;
  background:rgba(8,7,5,.94); backdrop-filter:blur(8px);
  align-items:center; justify-content:center; padding:5vmin;
}
.lb.is-open{ display:flex; }
.lb__content{ max-width:min(1100px,92vw); width:100%; position:relative; animation:fadeUp .5s var(--ease); }
.lb__content img{ width:100%; max-height:84vh; object-fit:contain; }
.lb__content .lb__frame{ position:relative; aspect-ratio:16/9; width:100%; background:#000; }
.lb__content iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }
.lb__close{
  position:absolute; top:-52px; right:0;
  font-family:var(--font-en); font-size:11px; letter-spacing:.3em; text-transform:uppercase;
  color:var(--paper); display:flex; gap:10px; align-items:center;
}
.lb__close:hover{ color:var(--accent); }
.lb__cap{ margin-top:14px; font-size:12px; color:var(--muted); letter-spacing:.08em; display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; }
.lb__cap a{ color:var(--accent); font-family:var(--font-en); font-size:10.5px; letter-spacing:.24em; text-transform:uppercase; }

/* ---------- Contact ---------- */
.contact-grid{ display:grid; grid-template-columns:.9fr 1.1fr; gap:clamp(36px,6vw,90px); }
@media (max-width:880px){ .contact-grid{ grid-template-columns:1fr; } }
.cinfo{ display:grid; gap:30px; align-content:start; }
.cinfo__item .k{
  font-family:var(--font-en); font-size:10px; letter-spacing:.32em; text-transform:uppercase;
  color:var(--accent); display:block; margin-bottom:10px;
}
.cinfo__item .v{ font-size:14.5px; line-height:1.9; }
.cinfo__item .v a{ color:var(--paper); border-bottom:1px solid var(--line); padding-bottom:2px; transition:color .3s,border-color .3s; }
.cinfo__item .v a:hover{ color:var(--accent); border-color:var(--accent); }
.form{ display:grid; gap:26px; }
.form .row{ display:grid; gap:10px; }
.form label{
  font-family:var(--font-en); font-size:10px; letter-spacing:.3em; text-transform:uppercase; color:var(--muted);
}
.form label em{ font-style:normal; color:var(--accent); margin-left:8px; }
.form input,.form select,.form textarea{
  width:100%; background:var(--bg-2); border:1px solid var(--line);
  color:var(--paper); padding:16px 18px; font:inherit; font-size:14px;
  border-radius:var(--radius); transition:border-color .35s;
  -webkit-appearance:none; appearance:none;
}
.form select{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23A89C88'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 18px center;
}
.form input:focus,.form select:focus,.form textarea:focus{ outline:none; border-color:var(--accent); }
.form textarea{ min-height:170px; resize:vertical; }
.form__note{ font-size:12px; color:var(--muted-2); line-height:1.9; }
/* 同意チェック */
.form .consent{ gap:14px; }
.form .check{
  display:flex; align-items:flex-start; gap:12px; cursor:pointer;
  font-family:var(--font-jp); font-size:13.5px; letter-spacing:.04em;
  text-transform:none; color:var(--paper);
}
.form .check input[type="checkbox"]{
  -webkit-appearance:auto; appearance:auto;
  width:18px; height:18px; padding:0; margin-top:2px; flex-shrink:0;
  accent-color:var(--accent); background:transparent; border:none; cursor:pointer;
}
.form .check a{ color:var(--accent); border-bottom:1px solid rgba(201,143,82,.4); padding-bottom:1px; }
.form .check em{ font-style:normal; color:var(--accent); margin-left:8px; font-size:11px; }
/* 送信ステータス */
.form__status{
  font-size:13px; line-height:1.9; padding:14px 16px;
  border:1px solid var(--line); border-radius:2px; color:var(--paper);
}
.form__status.is-ok{ border-color:rgba(201,143,82,.5); color:var(--accent); }
.form__status.is-err{ border-color:rgba(226,92,74,.5); color:#E2826F; }

/* steps mini */
.mini-steps{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line-soft); border:1px solid var(--line-soft); }
@media (max-width:720px){ .mini-steps{ grid-template-columns:1fr; } }
.mini-steps div{ background:var(--bg); padding:26px 24px; }
.mini-steps .n{ font-family:var(--font-en); font-size:10px; letter-spacing:.3em; color:var(--accent); display:block; margin-bottom:12px; }
.mini-steps h3{ font-size:14.5px; font-weight:700; letter-spacing:.06em; }
.mini-steps p{ margin-top:8px; font-size:12.5px; color:var(--muted); }

/* ---------- Misc ---------- */
.note-dummy{
  display:inline-block; font-size:11px; color:var(--muted-2);
  border:1px dashed rgba(168,156,136,.4); padding:3px 10px; border-radius:2px; letter-spacing:.06em;
}
.two-col{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(28px,4vw,64px); align-items:start; }
@media (max-width:880px){ .two-col{ grid-template-columns:1fr; } }
.lead-block{ display:grid; gap:22px; color:#CFC5B2; font-size:14.5px; max-width:760px; }
.lead-block strong{ color:var(--paper-hi); }
.check-list li{ padding:14px 0 14px 34px; position:relative; border-bottom:1px solid var(--line-soft); font-size:14px; }
.check-list li::before{
  content:"✓"; position:absolute; left:4px; top:14px; color:var(--accent); font-family:var(--font-en);
}
.check-list--no li::before{ content:"—"; color:var(--muted-2); }
.sub-note{ margin-top:18px; font-size:12.5px; color:var(--muted-2); }

/* break only on small screens */
br.sp{ display:none; }
@media (max-width:760px){ br.sp{ display:inline; } }

/* ============================================================
   v2 — Motion, Hero Video, ORIGIN, Recruit, Responsive Polish
   ============================================================ */

/* ---------- Brand logo ---------- */
.brand__logo{ height:30px; width:auto; display:block; flex-shrink:0; }
.footer__brand .brand__logo{ height:34px; }

/* tighter nav for 7 items */
.gnav{ gap:clamp(13px,1.8vw,28px); }
.gnav a:not(.btn){ font-size:11px; }
.mnav a:nth-child(8){ transition-delay:.43s; }
.mnav{ -webkit-backdrop-filter:blur(8px); }

/* ---------- Scroll progress ---------- */
.progress{
  position:fixed; top:0; left:0; right:0; height:2px; z-index:1300;
  background:linear-gradient(90deg, var(--accent), var(--accent-2));
  transform:scaleX(0); transform-origin:left; pointer-events:none;
}

/* ---------- Hero video ---------- */
.hero__video{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  opacity:0; transition:opacity 1.4s var(--ease);
  filter:saturate(.85) contrast(1.04);
}
.hero__bg.has-video .hero__video{ opacity:1; }
.hero__bg.has-video img{ opacity:0; animation:none; }

/* ---------- Character reveal ---------- */
.tchar{
  display:inline-block; opacity:0; transform:translateY(.55em);
  transition:opacity .5s var(--ease), transform .8s var(--ease);
  transition-delay:calc(var(--ci) * 26ms);
}
.is-in .tchar, .chars-in .tchar{ opacity:1; transform:translateY(0); }

/* ---------- Inline highlight (視線誘導) ---------- */
.hl{
  font-style:normal; color:var(--paper-hi);
  background:linear-gradient(transparent 64%, rgba(201,143,82,.34) 64%) no-repeat 0 0;
  background-size:0% 100%;
  transition:background-size 1.1s var(--ease) .25s;
}
.hl.is-in{ background-size:100% 100%; }
.statement em.hl{ color:var(--accent); }

/* ---------- CTA bgword generalized ---------- */
.cta::before{ content:attr(data-bgword); }

/* ---------- ORIGIN（名前の由来）---------- */
.origin{
  position:relative; height:360vh;
  background:var(--bg-2);
  border-top:1px solid var(--line-soft);
}
.origin__sticky{
  position:sticky; top:0; height:100vh; height:100svh;
  overflow:hidden; display:grid; place-items:center;
}
.origin__canvas{ position:absolute; inset:0; width:100%; height:100%; }
.origin__step{
  position:absolute; inset:0; z-index:2;
  display:grid; place-items:center; text-align:center;
  /* コピーは上側・パーティクルのKORIKIは下側。全体でひとつの塊として中央に見えるよう調整 */
  padding:0 var(--pad) 30vh;
  opacity:0; transform:translateY(28px);
  transition:opacity .9s var(--ease), transform .9s var(--ease);
  pointer-events:none;
}
.origin__copy, .origin__copy--s, .origin__label, .origin__kanji{
  text-shadow:0 2px 22px rgba(12,10,8,.95), 0 0 6px rgba(12,10,8,.8);
}
.origin__roles span{ text-shadow:0 1px 10px rgba(12,10,8,.9); }
.origin__step.is-on{ opacity:1; transform:none; }
/* 文字を形成しないステップ（小力）は完全に中央へ */
.origin__step--center{ padding-bottom:6vh; }
.origin__step > div{ max-width:780px; }
.origin__label{
  font-family:var(--font-en); font-size:11px; font-weight:500;
  letter-spacing:.42em; text-transform:uppercase; color:var(--accent);
  margin-bottom:30px; display:flex; justify-content:center; align-items:center; gap:14px;
}
.origin__label::before, .origin__label::after{ content:""; width:32px; height:1px; background:var(--accent); }
.origin__kanji{
  font-family:var(--font-serif); font-weight:700;
  font-size:clamp(88px,18vw,190px); line-height:1.05; letter-spacing:.08em;
}
.origin__kanji small{
  display:block; font-family:var(--font-en); font-weight:500;
  font-size:clamp(11px,1.5vw,14px); letter-spacing:.7em; text-indent:.7em;
  color:var(--muted); margin-top:24px; text-transform:uppercase;
}
.origin__copy{
  font-family:var(--font-serif); font-weight:600;
  font-size:clamp(18px,2.7vw,28px); line-height:2.1; letter-spacing:.08em;
}
.origin__copy em{ font-style:normal; color:var(--accent); }
.origin__copy--s{
  font-family:var(--font-jp); font-weight:400;
  font-size:clamp(12.5px,1.5vw,14.5px); color:var(--muted);
  margin-top:26px; line-height:2.1; letter-spacing:.06em;
}
.origin__roles{
  display:flex; flex-wrap:wrap; justify-content:center;
  gap:10px 12px; margin-top:36px; max-width:640px; margin-left:auto; margin-right:auto;
}
.origin__roles span{
  font-size:clamp(11.5px,1.4vw,13.5px); letter-spacing:.1em;
  border:1px solid var(--line); background:rgba(12,10,8,.6);
  padding:9px 17px; border-radius:2px;
  opacity:0; transform:translateY(16px) scale(.94);
  transition:opacity .6s var(--ease), transform .6s var(--ease);
}
.origin__step.is-on .origin__roles span{ opacity:1; transform:none; }
.origin__roles span:nth-child(1){ transition-delay:.05s; } .origin__roles span:nth-child(2){ transition-delay:.12s; }
.origin__roles span:nth-child(3){ transition-delay:.19s; } .origin__roles span:nth-child(4){ transition-delay:.26s; }
.origin__roles span:nth-child(5){ transition-delay:.33s; } .origin__roles span:nth-child(6){ transition-delay:.4s; }
.origin__roles span:nth-child(7){ transition-delay:.47s; } .origin__roles span:nth-child(8){ transition-delay:.54s; }
.origin__roles span:nth-child(9){ transition-delay:.61s; }
.origin__hint{
  position:absolute; bottom:26px; left:50%; transform:translateX(-50%); z-index:3;
  font-family:var(--font-en); font-size:9px; letter-spacing:.5em; text-transform:uppercase;
  color:var(--muted); opacity:.8;
}
/* static fallback (reduced motion / no JS) */
.origin--static{ height:auto; }
.origin--static .origin__sticky{ position:static; height:auto; display:block; padding:clamp(70px,9vw,110px) 0 30px; }
.origin--static .origin__canvas, .origin--static .origin__hint{ display:none; }
.origin--static .origin__step{
  position:static; opacity:1; transform:none; pointer-events:auto;
  padding:34px var(--pad);
}
.origin--static .origin__roles span{ opacity:1; transform:none; }

/* ---------- まなざし（gaze cards）---------- */
.gaze{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(20px,2.6vw,36px); }
@media (max-width:880px){ .gaze{ grid-template-columns:1fr; } }
.gaze__card{
  border:1px solid var(--line-soft); background:var(--bg-2);
  padding:clamp(30px,3.6vw,52px);
  transition:border-color .5s, transform .5s var(--ease);
}
.gaze__card:hover{ border-color:rgba(201,143,82,.4); transform:translateY(-5px); }
.gaze__card .k{
  font-family:var(--font-en); font-size:10px; letter-spacing:.36em; text-transform:uppercase;
  color:var(--accent); display:block; margin-bottom:20px;
}
.gaze__card blockquote{
  font-family:var(--font-serif); font-weight:600;
  font-size:clamp(16.5px,1.9vw,21px); line-height:2.1; letter-spacing:.06em;
  border-left:1px solid var(--accent); padding-left:20px; margin-bottom:20px;
}
.gaze__card p{ color:var(--muted); font-size:13.5px; }

/* ---------- 見せる。観せる。魅せる。（タグライン演出） ---------- */
.tag3 .w{
  display:inline-block; position:relative; margin-right:.3em;
  opacity:0; transform:translateY(.55em) scale(.97);
  filter:blur(8px);
  transition:opacity .8s var(--ease), transform 1s var(--ease), filter .8s var(--ease);
}
.is-in .tag3 .w{ opacity:1; transform:none; filter:blur(0); }
.is-in .tag3 .w:nth-child(1){ transition-delay:.05s; }
.is-in .tag3 .w:nth-child(2){ transition-delay:.4s; }
.is-in .tag3 .w:nth-child(3){ transition-delay:.75s; }
/* 各語の下をアクセントの線が走る */
.tag3 .w::after{
  content:""; position:absolute; left:0; bottom:-8px; height:2px; width:100%;
  background:var(--accent); transform:scaleX(0); transform-origin:left;
  transition:transform .55s var(--ease);
}
.is-in .tag3 .w:nth-child(1)::after{ transition-delay:.55s; transform:scaleX(1); }
.is-in .tag3 .w:nth-child(2)::after{ transition-delay:.9s;  transform:scaleX(1); }
.is-in .tag3 .w:nth-child(3)::after{ transition-delay:1.25s; transform:scaleX(1); }
/* 最後の「魅せる。」だけ余韻の光 */
.is-in .tag3 .w:nth-child(3){
  color:var(--paper-hi);
  text-shadow:0 0 28px rgba(201,143,82,.45);
}
/* カード背景の一文字（見・観・魅）— 本文に被らないよう右上に小さく・淡く */
.tagline-card{ overflow:hidden; }
.tagline-card > *{ position:relative; z-index:1; }
.tagline-card::before{
  content:attr(data-k);
  position:absolute; right:-6px; top:-22px; z-index:0;
  font-family:var(--font-serif); font-weight:700;
  font-size:clamp(86px,8vw,110px); line-height:1;
  color:transparent; -webkit-text-stroke:1px rgba(201,143,82,.13);
  opacity:0; transform:translateY(-14px);
  transition:opacity 1s var(--ease) .3s, transform 1.1s var(--ease) .3s,
             -webkit-text-stroke-color .6s var(--ease);
  pointer-events:none;
}
.tagline-card.is-in::before{ opacity:1; transform:none; }
.tagline-card:hover::before{ -webkit-text-stroke-color:rgba(201,143,82,.5); }

/* ============================================================
   TAGSHOW — 見せる。観せる。魅せる。（スクロール固定の三段変化）
   ============================================================ */
.tagshow{
  position:relative; height:300vh;
  background:var(--bg-2); border-top:1px solid var(--line-soft);
}
.tagshow__sticky{
  position:sticky; top:0; height:100vh; height:100svh;
  overflow:hidden; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:0;
  padding:0 var(--pad);
}
.tagshow__sticky .origin__label{ position:absolute; top:clamp(86px,12vh,120px); }
.tagshow__stage{ position:relative; width:100%; max-width:880px; height:min(62vh,560px); }
.tagshow__phase{
  position:absolute; inset:0;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center;
  opacity:0; transform:translateY(24px) scale(.985);
  transition:opacity .7s var(--ease), transform .8s var(--ease);
  pointer-events:none;
}
.tagshow__phase.is-on{ opacity:1; transform:none; }
/* 巨大な一文字：輪郭線＋光が走り抜ける */
.tagshow__kanji{
  font-family:var(--font-serif); font-weight:700;
  font-size:clamp(170px,34vh,320px); line-height:1;
  color:transparent;
  -webkit-text-stroke:1.5px rgba(201,143,82,.55);
  background:linear-gradient(115deg,
    transparent 32%, rgba(242,234,217,.95) 46%, rgba(201,143,82,.9) 54%, transparent 68%);
  background-size:260% 100%; background-position:215% 0;
  -webkit-background-clip:text; background-clip:text;
}
.tagshow__phase.is-on .tagshow__kanji{ animation:kanjiSweep 1.7s var(--ease) .2s forwards; }
@keyframes kanjiSweep{ to{ background-position:-70% 0; } }
/* 語と一文：時間差でせり上がる */
.tagshow__word{
  margin-top:clamp(18px,3vh,30px);
  font-family:var(--font-serif); font-weight:700;
  font-size:clamp(24px,4.6vw,44px); letter-spacing:.1em; color:var(--paper-hi);
  opacity:0; transform:translateY(18px);
  transition:opacity .7s var(--ease), transform .8s var(--ease);
}
.tagshow__copy{
  margin-top:14px;
  font-size:clamp(12.5px,1.5vw,15px); letter-spacing:.14em; color:var(--muted);
  opacity:0; transform:translateY(14px);
  transition:opacity .7s var(--ease) .15s, transform .8s var(--ease) .15s;
}
.tagshow__phase.is-on .tagshow__word{ opacity:1; transform:none; transition-delay:.35s; }
.tagshow__phase.is-on .tagshow__copy{ opacity:1; transform:none; transition-delay:.55s; }
/* 進行バー */
.tagshow__bar{
  position:absolute; bottom:clamp(64px,9vh,90px); left:50%; transform:translateX(-50%);
  width:min(240px,40vw); height:1px; background:var(--line);
}
.tagshow__bar i{
  position:absolute; inset:0; background:var(--accent);
  transform:scaleX(0); transform-origin:left; display:block;
}
/* 静的フォールバック（reduced-motion等） */
.tagshow--static{ height:auto; }
.tagshow--static .tagshow__sticky{ position:static; height:auto; padding:80px var(--pad); }
.tagshow--static .tagshow__sticky .origin__label{ position:static; margin-bottom:30px; }
.tagshow--static .tagshow__stage{ height:auto; display:grid; gap:60px; }
.tagshow--static .tagshow__phase{ position:static; opacity:1; transform:none; }
.tagshow--static .tagshow__phase .tagshow__word,
.tagshow--static .tagshow__phase .tagshow__copy{ opacity:1; transform:none; }
.tagshow--static .tagshow__bar, .tagshow--static .origin__hint{ display:none; }
@media (max-width:760px){
  .tagshow{ height:280vh; }
  .tagshow__kanji{ font-size:clamp(140px,26vh,220px); }
  .tagshow__word{ font-size:clamp(22px,6.4vw,30px); }
}

/* ---------- For Clients（安心材料） ---------- */
.assure{
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:1px; background:var(--line-soft); border:1px solid var(--line-soft);
}
@media (max-width:980px){ .assure{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:620px){ .assure{ grid-template-columns:1fr; } }
.assure li{ background:var(--bg); padding:24px 26px; transition:background .4s; }
.assure li:hover{ background:var(--bg-card); }
.assure b{
  display:block; font-size:14.5px; font-weight:700; letter-spacing:.05em;
  padding-left:26px; position:relative; line-height:1.7;
}
.assure b::before{
  content:"✓"; position:absolute; left:0; top:0;
  color:var(--accent); font-family:var(--font-en);
}
.assure span{
  display:block; margin-top:8px; padding-left:26px;
  font-size:12.5px; color:var(--muted); line-height:1.9;
}

/* ---------- Recruit ---------- */
.likes{ display:flex; flex-wrap:wrap; gap:10px 12px; margin-top:30px; }
.likes span{
  font-family:var(--font-serif); font-weight:600;
  font-size:clamp(14px,1.7vw,18px); letter-spacing:.08em;
  border:1px solid var(--line); background:var(--bg-2);
  padding:11px 20px;
}
.promise{
  border:1px solid rgba(201,143,82,.35); background:var(--bg-2);
  padding:clamp(34px,5vw,64px); position:relative;
}
.promise::before{
  content:"PROMISE"; position:absolute; top:-9px; left:24px;
  font-family:var(--font-en); font-size:10px; letter-spacing:.4em; color:var(--accent);
  background:var(--bg); padding:0 12px;
}

/* ---------- Language switcher ---------- */
.lang{ display:inline-flex; border:1px solid var(--line); border-radius:2px; overflow:hidden; }
.lang button{
  font-family:var(--font-en); font-size:10px; font-weight:500; letter-spacing:.14em;
  padding:8px 11px; color:var(--muted);
  transition:background .3s, color .3s;
}
.lang button + button{ border-left:1px solid var(--line); }
.lang button:hover{ color:var(--paper); }
.lang button.is-on{ background:var(--accent); color:#0C0A08; }
.mnav .lang{ margin-top:30px; }
.mnav .lang button{ font-size:12px; padding:11px 16px; }
@media (max-width:1240px) and (min-width:1021px){
  .gnav{ gap:clamp(10px,1.3vw,18px); }
  .gnav a:not(.btn){ font-size:10px; letter-spacing:.16em; }
  .lang button{ padding:7px 8px; }
}

/* ---------- 非日本語時のタイポ調整（英・西） ---------- */
html:not([lang="ja"]) body{ letter-spacing:.01em; }
html:not([lang="ja"]) .hero h1{ letter-spacing:.005em; line-height:1.18; font-size:clamp(33px,6.2vw,84px); }
html:not([lang="ja"]) .sec-title{ letter-spacing:.015em; line-height:1.35; }
html:not([lang="ja"]) .statement{ letter-spacing:.015em; line-height:1.75; }
html:not([lang="ja"]) .quote{ letter-spacing:.015em; line-height:1.85; }
html:not([lang="ja"]) .phero h1{ letter-spacing:.02em; line-height:1.25; }
html:not([lang="ja"]) .origin__copy{ letter-spacing:.02em; line-height:1.8; }
html:not([lang="ja"]) .profile-name{ letter-spacing:.03em; }
html:not([lang="ja"]) .lead-block, html:not([lang="ja"]) .sec-lead{ line-height:1.95; }
html:not([lang="ja"]) .tl__item h3, html:not([lang="ja"]) .ethos__card h3,
html:not([lang="ja"]) .gaze__card blockquote{ letter-spacing:.02em; line-height:1.6; }
html:not([lang="ja"]) .news-item__t{ letter-spacing:.02em; }
@media (max-width:760px){
  html:not([lang="ja"]) .hero h1{ font-size:clamp(30px,9vw,52px); }
}

/* ---------- Footer privacy link ---------- */
.plink{
  font-family:var(--font-en); font-size:9.5px; letter-spacing:.3em; text-transform:uppercase;
  color:var(--muted); transition:color .3s;
}
.plink:hover{ color:var(--accent); }

/* ---------- Legal / Privacy Policy ---------- */
.legal{ max-width:840px; }
.legal__meta{
  border:1px solid var(--line-soft); background:var(--bg-2);
  padding:clamp(22px,3vw,32px); margin:34px 0 10px;
  font-size:13px; line-height:2.1; color:#CFC5B2;
}
.legal__meta b{ color:var(--paper-hi); }
.legal h2{
  font-family:var(--font-serif); font-weight:600;
  font-size:clamp(17.5px,2.2vw,23px); letter-spacing:.06em; line-height:1.6;
  margin:clamp(44px,6vw,68px) 0 18px;
  padding-left:16px; border-left:2px solid var(--accent);
}
.legal h3{
  font-size:14.5px; font-weight:700; letter-spacing:.05em;
  color:var(--paper-hi); margin:26px 0 8px;
}
.legal p{ font-size:13.5px; line-height:2.1; color:#CFC5B2; margin:10px 0; }
.legal ol{ list-style:none; counter-reset:lg; margin:12px 0; }
.legal ol > li{
  counter-increment:lg; position:relative; padding-left:30px;
  font-size:13.5px; line-height:2.05; color:#CFC5B2; margin:9px 0;
}
.legal ol > li::before{
  content:counter(lg)"."; position:absolute; left:2px; top:0;
  color:var(--accent); font-family:var(--font-en); font-weight:500;
}
.legal ul{ margin:10px 0 14px; }
.legal ul li{
  position:relative; padding-left:18px;
  font-size:13px; line-height:1.95; color:var(--muted); margin:6px 0;
}
.legal ul li::before{ content:"—"; position:absolute; left:0; color:var(--accent-2); }
.legal ol ul{ margin-top:6px; }
.legal .note{ font-size:12.5px; color:var(--muted-2); }

/* ============================================================
   Content protection（抑止策：選択・ドラッグ・長押し保存）
   ============================================================ */
html, body{
  -webkit-user-select:none; -moz-user-select:none; user-select:none;
  -webkit-touch-callout:none;
}
/* メールアドレス（mailtoリンク）とフォームだけは選択・コピー可 */
input, textarea, select,
a[href^="mailto:"], a[href^="mailto:"] *,
[data-copy-ok], [data-copy-ok] *{
  -webkit-user-select:text; -moz-user-select:text; user-select:text;
  -webkit-touch-callout:default;
}
img, video{
  -webkit-user-drag:none;
  pointer-events:none;          /* 右クリック・長押しの対象を画像にしない（クリックは親リンクへ素通り） */
  -webkit-touch-callout:none;
}

/* ============================================================
   Responsive polish — mobile first-class
   ============================================================ */
@media (max-width:1020px){
  .header__in{ height:68px; }
  .brand__logo{ height:26px; }
}
@media (max-width:760px){
  body{ font-size:14.5px; }
  .btn{ padding:16px 24px; font-size:11px; letter-spacing:.22em; }
  .btn--s{ padding:12px 18px; }
  .hero h1{ font-size:clamp(34px,10.4vw,58px); }
  .hero__sub{ font-size:13.5px; line-height:2; }
  .hero__cta{ width:100%; gap:12px; }
  .hero__cta .btn{ flex:1 1 150px; justify-content:center; text-align:center; }
  .hero__meta{ gap:14px; font-size:9.5px; letter-spacing:.26em; }
  .sec-lead{ font-size:13.5px; }
  .marquee{ padding:16px 0; }
  .marquee span{ font-size:11px; padding:0 18px; gap:18px; }
  .stat{ padding:22px 18px; }
  .stat__num{ font-size:30px; }
  .stat__t{ font-size:12px; }
  .filters{ gap:8px; }
  .filters button{ padding:10px 14px; font-size:10px; letter-spacing:.16em; }
  .pgrid{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
  .work-card__play{ width:44px; height:44px; }
  .flow__no{ display:flex; align-items:baseline; gap:12px; }
  .flow__no small{ margin-top:0; }
  .quote{ font-size:17.5px; line-height:2.1; padding-left:18px; }
  .cta::before{ font-size:clamp(80px,26vw,140px); }
  .lb__close{ top:-44px; }
  .dtable th{ padding:18px 8px 0; }
  .dtable td{ padding:8px 8px 18px; }
  .phero p{ font-size:13.5px; }
  .news-item__t{ font-size:13.5px; }
  .origin{ height:330vh; }
  .origin__step{ padding-bottom:34vh; }
  .origin__step--center{ padding-bottom:6vh; }
  .origin__copy{ font-size:clamp(16px,4.6vw,20px); line-height:2; }
  .origin__kanji{ font-size:clamp(72px,22vw,110px); }
  .origin__roles{ gap:8px; margin-top:24px; }
  .origin__roles span{ padding:7px 12px; font-size:11px; }
  .footer__btm{ justify-content:center; text-align:center; }
}
@media (max-width:430px){
  .stats{ grid-template-columns:1fr; }
  .stat, .stats .stat:nth-child(1), .stats .stat:nth-child(2){
    border-right:none; border-bottom:1px solid var(--line-soft);
  }
  .stats .stat:last-child{ border-bottom:none; }
  .brand__txt{ font-size:12px; }
  .brand__txt small{ font-size:7.5px; }
}
/* large screens: more air */
@media (min-width:1500px){
  .hero h1{ font-size:96px; }
}
@media (prefers-reduced-motion: reduce){
  .rv, .rv-img, .tchar{ transition:none; opacity:1; transform:none; }
  .rv-img::after{ display:none; }
  .rv-img img{ transform:none; }
  .hero__bg img{ animation:none; }
  .marquee__track{ animation:none; }
  .hero h1 .l span{ animation:none; transform:none; }
  .hero__sub, .hero__cta{ animation:none; opacity:1; }
}