@font-face{font-family:"sinto-utopia-caption";font-style:normal;font-weight:400;src:local("Utopia Std Caption"),local("UtopiaStd-Capt"),local("UtopiaStd-Caption")}

/* ===== Fonts ===== */
@font-face{font-family:"sinto-kana36";font-weight:600;src:local("YuMin36pKana-Demi"),local("YuMin_36pKn-Demibold"),local("YuMincho +36p Kana Demibold")}
@font-face{font-family:"sinto-mincho";font-weight:600;src:local("YuMinPr6N-Demi"),local("YuMincho-Demibold"),local("YuMincho Demibold"),local("Yu Mincho Demibold")}
@font-face{font-family:"sinto-gothic";font-weight:700;src:local("YuGoPr6N-Bold"),local("YuGothic-Bold"),local("YuGothic Bold"),local("Yu Gothic Bold")}

/* ===== Tokens ===== */
:root{
  --paper:#FAF9F6;
  --ink:#221714;
  --accent:#007890;

  --f-latin:"sinto-utopia-caption","utopia-std-caption","Utopia Std Caption","utopia-std","Utopia Std",Georgia,"Times New Roman",serif;
  --f-statement:"sinto-kana36","sinto-mincho","Hiragino Mincho ProN","Noto Serif JP",serif;
  --f-gothic:"sinto-gothic","Hiragino Sans","Hiragino Kaku Gothic ProN","Noto Sans JP",Meiryo,sans-serif;

  --gutter:clamp(24px,4.4vw,64px);
  --measure:clamp(460px,47vw,640px);
  --content-max:1200px;

  /* KV statement (kv-b4-unified 決定値) */
  --statement-size:clamp(1.05rem,1.5vw,1.3rem);
  --tracking:.07em;
  --pitch:2.1;
  --para-gap:.7em;

  /* Section spacing */
  --sec-v:clamp(72px,10vw,120px);
}
.fallback{--f-latin:Georgia,serif;--f-statement:"Hiragino Mincho ProN","Noto Serif JP",serif;--f-gothic:"Hiragino Sans",sans-serif}

/* ===== Reset ===== */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--f-gothic);font-weight:700;overflow-x:hidden}
img{display:block;max-width:none}
h1,h2,h3,p,button{margin:0}
button{border:none;background:none;cursor:pointer}

/* ===== Header ===== */
.hd{position:absolute;inset:0 0 auto;z-index:10;display:flex;justify-content:flex-end;align-items:center;height:72px;padding:0 var(--gutter)}
.btn--solid{display:inline-flex;align-items:center;font-family:var(--f-latin);font-weight:700;letter-spacing:.06em;font-size:.95rem;color:#fff;background:var(--accent);padding:.5em 1.4em;border-radius:999px;text-decoration:none;transition:opacity .2s}
.btn--solid:hover{opacity:.82}

/* ===== KV ===== */
.kv{position:relative;min-height:max(100svh,760px);overflow:clip;isolation:isolate;
  display:flex;flex-direction:column;justify-content:center;
  padding:clamp(150px,24vh,230px) var(--gutter) clamp(56px,8vh,88px) calc(var(--gutter) + clamp(0px,16vw,280px))}
.kv__block{position:relative;width:var(--measure)}
.kv__mark{position:relative}
.kv__ink{position:absolute;z-index:0;pointer-events:none;
  width:calc(var(--measure)*var(--ink-w,1.95));
  left:calc(var(--measure)*var(--ink-x,-.8));
  top:calc(var(--measure) * (.204 * var(--ink-cut,1.3) - .468 * var(--ink-w,1.95)));
  opacity:1}
@keyframes kvInk{to{opacity:1}}
.kv__flow{width:100%;height:auto;mix-blend-mode:multiply;transform:rotate(var(--ink-r,-9deg));transform-origin:70% 100%}
.kv__name{position:relative;z-index:1;margin:0}
.kv__name img{width:100%;height:auto}

/* KV statement — kv-b4-unified 確定値を維持 */
.kv__statement{position:relative;z-index:1;margin-top:clamp(36px,6vh,60px);
  font-family:var(--f-statement);font-size:var(--statement-size);font-weight:600;
  font-feature-settings:"palt" 1;word-break:keep-all;overflow-wrap:anywhere;line-break:strict}
.kv__statement p{margin:0;line-height:var(--pitch);letter-spacing:var(--tracking)}
.kv__voice{/* 前後半同一：書体・サイズ・ウェイト・行送りすべて .kv__statement から継承 */}
.kv__body{margin-top:var(--para-gap)!important}
.br-sp{display:none}

.kv__more{position:relative;z-index:1;margin-top:clamp(32px,5vh,48px)}
.btn--line{display:inline-flex;justify-content:center;font-family:var(--f-gothic);font-weight:700;letter-spacing:.04em;font-size:1rem;color:var(--accent);background:transparent;border:1.5px solid var(--accent);padding:.85em 2.8em;text-decoration:none;transition:background .22s,color .22s}
.btn--line:hover{background:var(--accent);color:#fff}

/* ===== Section label ===== */
.sec-label{display:inline-flex;align-items:center;gap:.45em;
  font-family:var(--f-latin);font-size:.78rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--paper);background:var(--accent);padding:.28em .9em .28em .65em;
  margin-bottom:clamp(28px,4vw,48px)}
.sec-label::before{content:none}

/* ===== Recent Work ===== */
.rw{padding:var(--sec-v) 0 calc(var(--sec-v)*1.25)}
.rw__pad{padding:0 var(--gutter)}

.rw__slider{position:relative;overflow:hidden;touch-action:pan-y;cursor:grab}
.rw__slider:active{cursor:grabbing}
.rw__track{display:flex;will-change:transform;transition:transform .55s cubic-bezier(.4,0,.2,1)}
.rw__slide{flex:0 0 100%}
.rw__slide img{width:100%;max-width:100%;aspect-ratio:16/9;object-fit:cover;display:block}

/* Arrow nav */
.rw__nav{position:absolute;inset:0;display:flex;align-items:center;justify-content:space-between;pointer-events:none;padding:0 clamp(10px,2vw,28px)}
.rw__btn{width:clamp(36px,3.6vw,48px);height:clamp(36px,3.6vw,48px);border-radius:50%;border:1.5px solid rgba(250,249,246,.55);background:rgba(250,249,246,.75);backdrop-filter:blur(6px);display:flex;align-items:center;justify-content:center;pointer-events:all;font-size:1.2rem;color:var(--ink);line-height:1;transition:background .2s,border-color .2s}
.rw__btn:hover{background:var(--paper);border-color:rgba(34,23,20,.4)}

/* Caption + dots */
.rw__caption{margin-top:.75em;padding:0 var(--gutter);font-size:.8rem;letter-spacing:.04em;opacity:.55;min-height:1.4em}
.rw__dots{display:flex;justify-content:center;gap:9px;margin-top:20px}
.rw__dot{width:6px;height:6px;border-radius:50%;border:1.5px solid var(--accent);background:transparent;padding:0;transition:background .2s}
.rw__dot.is-active{background:var(--accent)}

.rw__more{text-align:center;margin-top:clamp(40px,5vw,64px)}

/* ===== Scroll animation ===== */
[data-anim]{opacity:1;transform:none;transition:opacity .75s ease,transform .75s ease;transition-delay:var(--anim-delay,0s)}
[data-anim].is-visible{opacity:1;transform:none}

/* ===== Narrow PC band ===== */
@media(min-width:821px) and (max-width:1100px){:root{--tracking:.045em}}

/* ===== SP ===== */
@media(max-width:820px){
  :root{
    --measure:64vw;
    --statement-size:clamp(.875rem,4.27vw,1rem);
    --tracking:.035em;
    --pitch:2;
    --para-gap:.9em;
  }
  .hd{height:60px}
  .kv{justify-content:flex-start;min-height:100svh;padding:clamp(196px,27svh,240px) var(--gutter) 72px}
  .kv__block{width:auto}
  .kv__mark{width:var(--measure)}
  .kv__ink{--ink-w:2.5;--ink-x:-.74;--ink-cut:.95;--ink-r:-10deg}
  .kv__statement{margin-top:30px}
  .br-sp{display:inline}
  .kv__more{margin-top:36px}

  .rw__slide img{aspect-ratio:4/3}


}

/* Codex Service: shared visual weight; type and imagery form one composition. */
:root{--service-name:clamp(32px,3vw,44px);--service-body:18px;--service-art:300px}
body{isolation:isolate}
main{overflow:clip}
.sec-label{padding:.3em .85em;gap:0}
.btn--line{border-color:transparent;background:rgba(0,120,144,.085)}
.btn--line:hover{background:rgba(0,120,144,.16);color:var(--accent)}
a:focus-visible,button:focus-visible{outline:2px solid var(--accent);outline-offset:5px}
.kv__ink{will-change:transform}
.rw,.sv{position:relative;isolation:isolate}
.rw__pad,.sv__inner{position:relative;z-index:1}
.marble{position:absolute;z-index:-1;pointer-events:none;mix-blend-mode:multiply;will-change:transform}
.marble--rw{width:clamp(230px,34vw,470px);top:-50px;right:-130px;opacity:.65;rotate:-24deg}
.marble--bridge{width:clamp(250px,31vw,440px);left:-170px;top:-90px;opacity:.5;rotate:25deg}
.marble--sv{width:clamp(220px,27vw,380px);right:-210px;top:53%;opacity:.4;rotate:-25deg}
.rw__slider{z-index:1;background:var(--paper)}
.rw__nav{z-index:2}
.rw__btn{cursor:pointer}
.rw__caption{font-size:14px;opacity:1;line-height:1.8;padding-top:8px}
.rw__dots{align-items:center;gap:4px}
.rw__dot{width:32px;height:32px;border:0;position:relative}
.rw__dot::after{content:'';position:absolute;width:6px;height:6px;border:1px solid var(--accent);border-radius:50%;left:13px;top:13px}
.rw__dot.is-active::after{background:var(--accent)}
.sv{padding:70px 0 140px}
.sv__inner{padding:0 var(--gutter);max-width:1440px;margin:auto}
.sv__header{max-width:1000px;margin-bottom:36px}
.sv__en{font-family:var(--f-latin);font-weight:400;font-size:clamp(26px,3.1vw,42px);line-height:1.15;margin-bottom:22px}
.sv__title{font-family:var(--f-statement);font-weight:600;font-size:clamp(28px,3.7vw,52px);letter-spacing:.045em;line-height:1.55;font-feature-settings:'palt' 1;margin-bottom:24px}
.sv__lead{font-size:clamp(18px,1.5vw,20px);line-height:1.9;letter-spacing:.025em;max-width:54em}
.sv__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:clamp(32px,4vw,72px);row-gap:56px}
.sv__item{min-width:0;position:relative}
.sv__art{height:var(--service-art);width:var(--service-art);max-width:100%;margin:0 auto 10px;position:relative;overflow:hidden}
.sv__art img{position:absolute;width:200%;height:200%;max-width:none;object-fit:fill;left:0;top:0}
.sv__art--planning img{left:-100%}.sv__art--production img{top:-100%}.sv__art--event img{left:-100%;top:-100%}
.sv__name{font-family:var(--f-latin);font-size:var(--service-name);font-weight:400;letter-spacing:-.045em;line-height:1.18;text-align:center;white-space:nowrap;margin-bottom:22px}
.sv__desc{font-size:var(--service-body);font-weight:700;line-height:1.85;letter-spacing:.025em;max-width:32em;margin:0 auto}
@media(min-width:821px) and (max-width:1050px){:root{--service-name:30px;--service-art:260px}}
@media(max-width:820px){
 :root{--service-name:clamp(24px,7.1vw,36px);--service-body:16px;--service-art:260px}
 .sv{padding-top:52px;padding-bottom:96px}
 .sv__grid{grid-template-columns:1fr;row-gap:48px}
 .sv__header{margin-bottom:28px}
 .sv__en{font-size:28px;margin-bottom:18px}
 .sv__title{font-size:clamp(25px,6.7vw,36px);line-height:1.6;margin-bottom:20px}
 .sv__lead{font-size:17px;line-height:1.9}
 .sv__art{margin-bottom:10px}
 .sv__name{letter-spacing:-.045em;margin-bottom:18px}
 .sv__desc{max-width:32em}
 .marble--rw{right:-165px;top:-30px;width:300px;opacity:.52}
 .marble--bridge{width:280px;left:-195px;top:-35px;opacity:.45}
 .marble--sv{width:270px;right:-210px;top:55%;opacity:.38}
 .rw__caption{font-size:13px}
}
@media(max-width:360px){:root{--service-art:235px;--service-name:24px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}.marble,.kv__ink{transform:none!important}[data-anim]{opacity:1!important;transform:none!important}}