/* =========================================================
   Pochitto! — 結合サイトの土台
   （各画面の見た目は site.css 側。ここは並べ方だけ）
   ========================================================= */

*{box-sizing:border-box}
h1,h2,h3,h4,h5,p,figure,blockquote,dl,dd{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
button{font:inherit}
html{scroll-behavior:smooth}
html.has-smooth{scroll-behavior:auto}
body{
  margin:0;background:#ffffff;color:#141414;
  font-family:'Zen Kaku Gothic New','Hiragino Kaku Gothic ProN','Yu Gothic',sans-serif;
  -webkit-font-smoothing:antialiased;
}
img{max-width:none}
.screen img{height:auto}

.skip-link{
  position:fixed;left:16px;top:12px;z-index:10000;
  padding:10px 14px;background:#141414;color:#fff;text-decoration:none;
  transform:translateY(-160%);transition:transform .2s ease;
}
.skip-link:focus{transform:none}

/* ---- 画面の並べ方 ---- */
.screen{position:relative;width:100%;overflow:hidden}
.screen > .stage{
  position:absolute;left:50%;top:0;
  transform:translateY(var(--hold,0px)) translateX(-50%) scale(var(--k,1));
  transform-origin:50% 0;
}
/* 全体を見せる画面は、上下も中央に置く */
.screen.is-contain > .stage{
  top:50%;
  transform:translate(-50%,-50%) scale(var(--k,1));
  transform-origin:50% 50%;
}

/* HERO は幅に合わせる（構図を切らない） */
#hero{background:#ffffff}

/* スクロールのあいだ画面に貼りついたまま、中身だけが進む画面 */
/* SERVICE の最後に重ねる。重なり量は SERVICE の版下の高さで変わるので
   site.js の fit() が px で入れる（ここでは書かない）。 */
/* 頭の1画面は SERVICE からの入れ替わりに使うので、そのぶん長くする */
#works{height:530vh;overflow:visible;position:relative;z-index:4}
/* HERO は1画面ぶん止まる。その間に CONCEPT が点から開く */
#hero{height:260vh;overflow:visible}
#concept{height:800vh;overflow:visible;position:relative;z-index:2;margin-top:-260vh}
/* SERVICE は CONCEPT の上に1画面ぶん重ねる。
   ただしスクロールで動かさず、「ポチっと」を押した一点から
   円が広がるように現れる（site.js が clip-path を入れる）。 */
/* CONCEPT の最後に1画面ぶん重ねて、その場で溶けて入れ替わる */
/* CONCEPT の最後に2画面ぶん重ねる。
   前半1画面 … CONCEPT の貼りつきと SERVICE の貼りつきが両方きいている＝溶かす区間
   後半1画面 … CONCEPT が離れる */
#service{position:relative;z-index:3;margin-top:-200vh;overflow:visible}
/* ブラウザが勝手にスクロール位置を補正すると、画面が上下に跳ねて見える。切る。 */
html{overflow-anchor:none}
#hero .pin,
#works .pin,
#concept .pin{position:sticky;top:0;height:100vh;overflow:hidden}
#hero .pin > .stage,
#works .pin > .stage,
#concept .pin > .stage{
  position:absolute;left:50%;top:50%;
  transform:translate(-50%,-50%) scale(calc(var(--k,1) * var(--zin,1)));
  transform-origin:50% 50%;
}

/* ---- セクションごとの地色 ---- */
#hero{background:#ffffff;color:#141414}
/* 白は穴の開く側（.pin）に持たせる。セクション自体は透ける */
#concept{background:transparent;color:#141414}
#concept .pin{background:#ffffff}
#service{background:#0D0D0D;color:#ffffff}
/* 白は貼りつく側に持たせる。箱は透ける（つなぎで白を動かすため）*/
#works{background:transparent;color:#141414}
#works .pin{background:#ffffff}
#profile{background:#FBFAF7;color:#141414}
#contact{background:#FBFAF7;color:#141414}

/* ---- スクロールで出てくる ---- */
.screen > .stage,
.screen .pin > .stage{opacity:0;transition:opacity .7s ease}
#hero .pin > .stage{opacity:1}
/* PROFILE は要素ごとに出るので、画面全体のフェードはしない */
#profile > .stage{opacity:1}
/* WORKS の締めに1画面ぶん重ねて、その場ですっと入れ替える（下から出てこない） */
#profile{position:relative;z-index:5;margin-top:-200vh;overflow:visible}
.screen.is-in > .stage,
.screen.is-in .pin > .stage{opacity:1}

/* ---- サイト全体のカーソル（指アイコン） ---- */
.cursor-hand{
  position:fixed;left:0;top:0;z-index:9999;
  width:52px;height:auto;
  pointer-events:none;user-select:none;
  transform:translate3d(var(--cx,-300px),var(--cy,-300px),0) scale(var(--cs,1));
  transform-origin:92% 16%;
  transition:transform .10s ease-out, opacity .25s ease;
  opacity:0;will-change:transform;
}
html.has-cursor .cursor-hand{opacity:1}
html.has-cursor,
html.has-cursor *{cursor:none !important}
html.has-cursor input,
html.has-cursor textarea,
html.has-cursor select{cursor:auto !important}

/* ---- 共通ナビゲーション ---- */
.topnav{
  position:fixed;left:0;right:0;top:0;z-index:100;
  height:76px;pointer-events:none;
  --c:#141414;--acc:#e9f22a;
  transition:transform .34s cubic-bezier(.4,0,.2,1);
}
.topnav::before{
  content:"";position:absolute;inset:0;
  /* backdrop-filter は画面に固定された帯なので、スクロール中ずっと
     後ろ全部をぼかし直すことになる。これが一番のガクつきの元だった。
     ほぼ不透明な地色にすれば見た目はほとんど変わらず、負荷はゼロになる。 */
  background:rgba(255,255,255,.94);
  opacity:0;transition:opacity .3s ease,background .3s ease;
  pointer-events:none;
}
.topnav.is-stuck::before{opacity:1}
.topnav.is-dark::before{background:rgba(13,13,13,.62)}
.topnav.is-dark{--c:#ffffff}
.topnav.is-hide{transform:translateY(-118%)}
.topnav a,.topnav button{pointer-events:auto}
.topnav__logo{
  position:absolute;left:26px;top:22px;
  font-family:'Archivo','Arial Narrow',Impact,sans-serif;
  font-variation-settings:'wdth' 100,'wght' 900;
  font-weight:900;font-size:26px;letter-spacing:-.018em;
  color:var(--c);text-decoration:none;
  transition:color .3s ease;
}
.topnav__logo span{color:var(--acc);-webkit-text-stroke:1.4px var(--c)}
.topnav__list{
  position:absolute;right:84px;top:34px;display:flex;gap:34px;
  opacity:1;transform:none;transition:opacity .22s ease,transform .22s ease;
}
.topnav.is-menu-collapsed .topnav__list{
  opacity:0;transform:translateY(-10px);pointer-events:none;
}
.topnav__list a{
  font-family:'Archivo','Arial Narrow',Impact,sans-serif;
  font-variation-settings:'wdth' 100,'wght' 700;
  font-weight:700;font-size:12.5px;letter-spacing:.09em;
  color:var(--c);text-decoration:none;padding-bottom:4px;
  border-bottom:2px solid transparent;
  transition:color .3s ease,border-color .3s ease;
}
.topnav__list a.is-on{border-bottom-color:var(--acc)}
.topnav__burger{
  position:absolute;right:26px;top:15px;
  width:48px;height:48px;border:0;border-radius:50%;
  background:var(--acc);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:6px;cursor:pointer;
}
.topnav__burger i{display:block;width:21px;height:3px;background:#141414}
.topnav__burger i{transition:transform .22s ease,opacity .22s ease}
.topnav__burger.is-active i:nth-child(1){transform:translateY(9px) rotate(45deg)}
.topnav__burger.is-active i:nth-child(2){opacity:0}
.topnav__burger.is-active i:nth-child(3){transform:translateY(-9px) rotate(-45deg)}
.topnav a:focus-visible,.topnav button:focus-visible{outline:2px solid var(--acc);outline-offset:4px}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .screen > .stage,.screen .pin > .stage{opacity:1;transition:none}
}


/* =========================================================
   作品の正面表示（WORKS のパネルをクリック）
   ========================================================= */
.wview{
  position:fixed;inset:0;z-index:9000;
  display:flex;align-items:center;justify-content:center;
  background:rgba(247,246,242,.985);
  opacity:0;visibility:hidden;
  transition:opacity .34s ease,visibility .34s;
}
.wview.is-open{opacity:1;visibility:visible}
.wview__box{
  margin:0;display:flex;flex-direction:column;align-items:center;gap:22px;
  transform:scale(.92) translateY(14px);
  transition:transform .38s cubic-bezier(.2,.9,.25,1);
}
.wview.is-open .wview__box{transform:none}
.wview__box img{
  display:block;max-width:min(74vw,940px);max-height:70vh;width:auto;height:auto;
  box-shadow:0 2px 6px rgba(0,0,0,.14),0 26px 60px rgba(0,0,0,.26);
}
.wview__cap{text-align:center;font-family:'Zen Kaku Gothic New',sans-serif}
.wview__cap b{
  display:block;font-family:'Archivo',sans-serif;
  font-variation-settings:'wdth' 100,'wght' 900;
  font-size:26px;letter-spacing:.02em;color:#141414;
}
.wview__cap span{display:block;margin-top:7px;font-size:13.5px;color:#5c5c56}
.wview__close{
  position:absolute;right:34px;top:30px;
  width:52px;height:52px;border:0;border-radius:50%;
  background:#141414;cursor:pointer;
}
.wview__close::before,.wview__close::after{
  content:"";position:absolute;left:16px;top:25px;width:20px;height:2.4px;background:#fff;
}
.wview__close::before{transform:rotate(45deg)}
.wview__close::after{transform:rotate(-45deg)}
.wview__close:focus-visible{outline:3px solid #e9f22a;outline-offset:4px}
.wview__hint{
  position:absolute;left:0;right:0;bottom:26px;text-align:center;
  font-size:12px;letter-spacing:.1em;color:#7d7d76;
}


/* =========================================================
   作品の一覧表示（VIEW ALL WORKS で切り替え）
   ========================================================= */
.wgrid{
  position:fixed;inset:0;z-index:8500;
  background:#F7F6F2;
  overflow-y:auto;overscroll-behavior:contain;
  opacity:0;visibility:hidden;
  transition:opacity .32s ease,visibility .32s;
}
.wgrid.is-open{opacity:1;visibility:visible}
.wgrid__bar{
  position:sticky;top:0;z-index:2;
  display:flex;align-items:center;justify-content:space-between;
  padding:26px 40px;
  background:rgba(247,246,242,.985);
  border-bottom:1px solid #e2e1da;
}
.wgrid__ttl{
  font-family:'Archivo',sans-serif;
  font-variation-settings:'wdth' 62,'wght' 900;
  font-size:34px;letter-spacing:.01em;color:#141414;
}
.wgrid__n{margin-left:14px;font-size:12px;letter-spacing:.14em;color:#8d8d85;
  font-variation-settings:'wdth' 100,'wght' 700}
.wgrid__close{
  width:48px;height:48px;border:0;border-radius:50%;
  background:#141414;cursor:pointer;position:relative;flex:none;
}
.wgrid__close::before,.wgrid__close::after{
  content:"";position:absolute;left:14px;top:23px;width:20px;height:2.4px;background:#fff;
}
.wgrid__close::before{transform:rotate(45deg)}
.wgrid__close::after{transform:rotate(-45deg)}
.wgrid__close:focus-visible{outline:3px solid #e9f22a;outline-offset:4px}
.wgrid__list{
  display:grid;gap:30px 26px;
  grid-template-columns:repeat(auto-fill,minmax(232px,1fr));
  padding:40px;
}
.wgrid__item{margin:0;cursor:pointer;background:none;border:0;padding:0;text-align:left;font:inherit}
.wgrid__item figure{margin:0}
.wgrid__thumb{
  aspect-ratio:1/1;display:flex;align-items:center;justify-content:center;
  background:#fff;border:1px solid #e4e3dc;overflow:hidden;
  transition:transform .3s cubic-bezier(.2,.9,.25,1),box-shadow .3s ease;
}
.wgrid__thumb img{max-width:86%;max-height:86%;width:auto;height:auto;display:block}
.wgrid__item:hover .wgrid__thumb,
.wgrid__item:focus-visible .wgrid__thumb{
  transform:translateY(-5px);box-shadow:0 14px 28px rgba(0,0,0,.14);
}
.wgrid__t{
  display:block;margin-top:14px;
  font-family:'Archivo',sans-serif;
  font-variation-settings:'wdth' 100,'wght' 900;
  font-size:15px;letter-spacing:.02em;color:#141414;
}
.wgrid__s{display:block;margin-top:4px;font-size:12px;color:#5c5c56}
.wgrid__s::after{
  content:" / CONCEPT WORK";
  font-size:9px;letter-spacing:.08em;color:#96968f;
}
.wgrid__item:focus-visible{outline:3px solid #141414;outline-offset:6px}


/* 見出しの1文字ずつ（スクロールで立ち上がる） */
.sf__c{
  display:inline-block;
  transform-origin:50% 100%;
  will-change:transform,opacity;
}
@media (prefers-reduced-motion:reduce){
  .sf__c{opacity:1 !important;transform:none !important}
}


/* 一覧の絞り込み */
.wgrid__filter{
  display:flex;flex-wrap:wrap;gap:10px;
  padding:0 48px 22px;
}
.wgrid__cat{
  border:1.5px solid #d8d8d0;background:none;cursor:pointer;
  padding:9px 18px;border-radius:999px;
  font-family:'Archivo','Arial Narrow',Impact,sans-serif;
  font-variation-settings:'wdth' 100,'wght' 700;
  font-weight:700;font-size:12px;letter-spacing:.12em;color:#5c5c56;
  transition:background .25s ease, color .25s ease, border-color .25s ease;
}
.wgrid__cat:hover{border-color:#141414;color:#141414}
.wgrid__cat.is-on{background:#141414;border-color:#141414;color:#e9f22a}
.wgrid__cat:focus-visible{outline:3px solid #e9f22a;outline-offset:3px}


/* =========================================================
   画面のつなぎ目：斜めの帯で地色が入れ替わる
   HERO のライム面と同じ「右下がり」の角度に合わせてある
   ========================================================= */
.edge{
  position:relative;z-index:2;pointer-events:none;overflow:hidden;
  height:min(420px, 23vw);
  background:var(--a,#fff);
}
.edge::before{
  content:"";position:absolute;inset:0;
  background:var(--b,#000);
  clip-path:polygon(0 0, 100% 100%, 0 100%);
}


/* =========================================================
   読み込み画面
   細い線が引かれ、下の数字が 0→100 になり、
   線が集まったところで POCHITTO! が立ち上がる。
   ========================================================= */
.loader{
  position:fixed;inset:0;z-index:9999;
  background:#ffffff;
  display:grid;place-items:center;
  transition:transform .92s cubic-bezier(.76,0,.2,1);
}
.loader.is-done{transform:translateY(-101%)}
.loader__lines{position:absolute;inset:0;pointer-events:none}
.loader__lines i{
  position:absolute;left:0;width:100%;height:1.5px;
  background:#141414;
  transform:scaleX(var(--p,0));transform-origin:0 50%;
}
.loader__lines i:nth-child(1){top:19%}
.loader__lines i:nth-child(2){top:31%;background:#e9f22a;height:3px}
.loader__lines i:nth-child(3){top:43%}
.loader__lines i:nth-child(4){top:57%;background:#e9f22a;height:3px}
.loader__lines i:nth-child(5){top:69%}
.loader__lines i:nth-child(6){top:81%}
.loader__word{
  position:relative;z-index:2;overflow:hidden;padding:0 6px;
  font-family:'Archivo','Arial Narrow',Impact,sans-serif;
  font-variation-settings:'wdth' 62,'wght' 900;
  font-weight:900;font-size:clamp(44px,7.6vw,132px);line-height:.9;
  letter-spacing:-.01em;color:#141414;white-space:nowrap;
  background:#ffffff;
}
.loader__word span{display:block;transform:translateY(112%)}
.loader.is-ready .loader__word span{
  transform:none;transition:transform .82s cubic-bezier(.16,1,.3,1);
}
.loader__num{
  position:absolute;left:0;right:0;bottom:34px;text-align:center;
  font-family:'Archivo','Arial Narrow',sans-serif;
  font-variation-settings:'wdth' 100,'wght' 700;
  font-weight:700;font-size:15px;letter-spacing:.24em;color:#141414;
}
.loader.is-ready .loader__num{opacity:0;transition:opacity .4s ease}
body.is-loading{overflow:hidden}

@media (prefers-reduced-motion:reduce){
  .loader{display:none}
}
#contact{position:relative;z-index:6}

/* ---------- 背の高いセクションの貼りつき ----------
   画面より背が高いので .pin（1画面ぶん）は使えない。
   版下と同じ高さの箱を sticky にして、その中で版下を貼りつける。
   ブラウザ側で処理されるので、スクロールに1コマも遅れない。
   ※ 親に overflow:hidden があると sticky がきかないので #service / #profile は visible。 */
.hold{position:sticky;top:0}
#service .hold > .stage,
#profile .hold > .stage{
  position:absolute;left:50%;top:0;
  transform:translateX(-50%) scale(var(--k,1));
  transform-origin:50% 0;
}
#service .hold > .stage,
#profile .hold > .stage{opacity:1}

/* =========================================================
   スマホ（〜767px）
   版下の縮小・画面への貼りつき・重なって溶かすつなぎを、全部やめる。
   セクションは上から下へふつうに流す。
   構成（順番・言葉・作品）は PC と同じ。並べ方だけ変える。
   ========================================================= */
@media (max-width:767px){
  html{overflow-anchor:auto}
  html.has-smooth{scroll-behavior:auto}

  .screen{
    height:auto !important;min-height:0 !important;
    margin-top:0 !important;
    position:relative;z-index:auto !important;
    /* 濃さは site.js の 5c（場面の切り替わり）が使うので !important にしない */
    transform:none !important;
    overflow:hidden !important;
  }
  .pin,.hold{
    position:static !important;height:auto !important;
    overflow:visible !important;background:none !important;
    transform:none !important;opacity:1 !important;
  }
  .screen > .stage,
  .screen .pin > .stage,
  .screen .hold > .stage{
    position:relative !important;left:auto !important;top:auto !important;
    width:100% !important;height:auto !important;
    transform:none !important;opacity:1 !important;
    transition:none;
  }
  /* HERO だけは1画面の構図をそのまま使うので、高さを持たせる。
     ほかのセクションは中身を普通に流して、自然な高さにする。 */
  #hero .pin > .stage{
    height:100vh !important;height:100svh !important;
    min-height:560px;
  }

  /* --- 上のバー：ロゴとボタンだけ。メニューは押したら全画面で開く --- */
  .topnav{height:60px}
  .topnav__logo{left:18px;top:15px;font-size:22px}
  .topnav__burger{right:16px;top:8px;width:44px;height:44px;gap:5px;z-index:2}
  .topnav__burger i{width:19px;height:2.5px;transition:transform .3s var(--e,cubic-bezier(.16,.84,.24,1)),opacity .2s ease}
  /* スマホでは「開いているときだけ ×」。PC 用の is-active は無視する */
  .topnav__burger.is-active i:nth-child(1),
  .topnav__burger.is-active i:nth-child(3){transform:none}
  .topnav__burger.is-active i:nth-child(2){opacity:1}
  .topnav.is-open .topnav__burger i:nth-child(1){transform:translateY(7.5px) rotate(45deg)}
  .topnav.is-open .topnav__burger i:nth-child(2){opacity:0}
  .topnav.is-open .topnav__burger i:nth-child(3){transform:translateY(-7.5px) rotate(-45deg)}

  .topnav__list{
    position:fixed;left:0;right:0;top:0;bottom:0;
    display:flex !important;flex-direction:column;
    align-items:flex-start;justify-content:center;
    gap:0;padding:0 32px;
    background:#141414;
    opacity:0 !important;transform:none !important;
    visibility:hidden;pointer-events:none !important;
    transition:opacity .32s ease,visibility .32s;
  }
  .topnav.is-open .topnav__list{
    opacity:1 !important;visibility:visible;pointer-events:auto !important;
  }
  .topnav__list a{
    font-size:32px;letter-spacing:.02em;color:#ffffff;
    padding:14px 0;border-bottom:0;width:100%;
  }
  .topnav__list a.is-on{color:#e9f22a;border-bottom:0}
  .topnav.is-hide{transform:none}          /* スマホでは隠さない */
  .topnav.is-dark .topnav__logo{color:#ffffff}

  /* 中身を普通に流すセクションは、版下に余白だけ持たせる */
  /* 版下は .pin / .hold の中にある場合があるので、必ず子孫セレクタで書く。
     `#service > .stage` は .hold が間に入るため当たらない（一度やらかした）。 */
  #concept .stage{padding:48px 22px 44px}
  #service .stage{padding:62px 22px 34px}
  #works   .stage{padding:48px 22px 44px;display:flex;flex-direction:column}
  #profile .stage{padding:52px 22px 44px}
  #contact .stage{padding:52px 22px 36px}

  /* --- セクションの入り口に、少しだけ動きを足す ---
     PC の「溶けて入れ替わる」つなぎはスマホでは使えないので、
     見出しが下から立ち上がることで「場面が変わった」と分かるようにする。 */
  .m-rise{
    opacity:0;transform:translateY(26px);
    transition:opacity .7s ease var(--md,0s),
               transform .9s cubic-bezier(.16,.84,.24,1) var(--md,0s);
  }
  .m-rise.is-up{opacity:1;transform:none}

  /* --- 全作品の一覧（VIEW ALL WORKS）--- */
  .wgrid__bar{padding:14px 18px}
  .wgrid__ttl{font-size:22px}
  .wgrid__n{margin-left:10px;font-size:10.5px}
  .wgrid__close{width:44px;height:44px}
  .wgrid__close::before,.wgrid__close::after{left:12px;top:21px;width:19px}
  .wgrid__list{
    grid-template-columns:repeat(2,1fr);
    gap:22px 14px;padding:20px 18px 48px;
  }
  .wgrid__t{margin-top:10px;font-size:13px}
  .wgrid__s{font-size:11px}
  .wgrid__filter{padding:0 18px 4px}

  /* --- 作品の拡大表示 --- */
  .wview{padding:16px}
  .wview__box{max-width:100%}
  .wview__cap{padding:0 4px}

  /* 白は貼りつき側に持たせていたので、セクションへ戻す */
  #concept{background:#ffffff}
  #works{background:#ffffff}
  #hero{background:#ffffff}
}