/* ============================================================
   プロジェクト詳細ページ
   site.css → event.css のあとに読み込む。
   色は event.css の body[data-ev] から受け取る
   ============================================================ */

body[data-ev].pj{background:var(--paper);color:var(--ink)}
.pj main{display:block}

/* 共通のかたち ------------------------------------------------ */
.pj-sec{padding:clamp(84px,13vw,180px) var(--gutter)}
.pj-in{max-width:1180px;margin:0 auto}
.pj-narrow{max-width:820px}

.pj-label{
  display:block;font-family:var(--disp);font-weight:900;
  font-size:11px;letter-spacing:.34em;text-indent:.34em;
  color:var(--ev-key);
}
.pj-h{
  font-family:var(--disp);font-weight:900;
  font-size:clamp(28px,4.6vw,62px);line-height:1.24;letter-spacing:-.01em;
  color:var(--ev-ink);
}
.pj-body{
  font-size:clamp(15px,1.32vw,18px);font-weight:500;line-height:2.05;
  color:rgba(20,22,26,.84);
}
.pj-body + .pj-body{margin-top:1.7em}
.pj-rule{height:1px;background:var(--line);border:0;margin:0}

/* 1. HERO ---------------------------------------------------- */
.pj-hero{position:relative;background:var(--paper)}
.pj-hero-photo{position:relative;margin:0;overflow:hidden}
.pj-hero-photo img{
  display:block;width:100%;height:clamp(340px,74vh,760px);
  object-fit:cover;object-position:50% 30%;
}
/* dvh はアドレスバーの伸縮で値が変わり写真が跳ねるので、固定される svh を使う */
@supports (height:1svh){
  .pj-hero-photo img{height:clamp(340px,74svh,760px)}
}
/* 上端は案内が読めるよう、下端は白へ溶かす */
.pj-hero-photo::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,
    rgba(0,0,0,.34) 0%, rgba(0,0,0,.06) 16%,
    transparent 40%, transparent 72%,
    rgba(250,249,247,.55) 100%);
}
.pj-hero-in{
  position:relative;z-index:2;max-width:1180px;margin:0 auto;
  padding:clamp(40px,6vw,76px) var(--gutter) clamp(56px,8vw,96px);
}
.pj-hero-in .pj-label{margin-bottom:clamp(20px,2.6vw,30px)}
.pj-hero-in h1{
  font-family:var(--disp);font-weight:900;
  font-size:clamp(32px,6.6vw,88px);line-height:1.08;letter-spacing:-.02em;
  color:var(--ink);
}
.pj-en{
  display:block;margin-top:clamp(14px,1.8vw,22px);
  font-family:var(--disp);font-weight:700;
  font-size:clamp(11px,1.16vw,15px);letter-spacing:.26em;
  color:var(--ev-key);
}
.pj-hero-lead{
  margin-top:clamp(30px,4vw,48px);
  font-size:clamp(17px,2.05vw,27px);font-weight:700;line-height:1.85;
  color:var(--ev-ink);
}
.pj-hero-lead::before{
  content:"";display:block;width:clamp(48px,6vw,96px);height:2px;
  background:var(--ev-ink);margin-bottom:clamp(20px,2.6vw,32px);
}

/* 2. ABOUT THE PROJECT --------------------------------------- */
.pj-intro .pj-in{
  display:grid;grid-template-columns:minmax(150px,.32fr) 1fr;
  gap:clamp(28px,5vw,88px);align-items:start;
}
.pj-intro .pj-label{position:sticky;top:clamp(96px,13vh,140px)}
.pj-intro .lead{
  font-size:clamp(18px,2.15vw,28px);font-weight:700;line-height:1.9;
  color:var(--ev-ink);margin-bottom:1.4em;
}

/* 3. PROJECT INFORMATION ------------------------------------- */
.pj-info{padding-top:0}
.pj-info .pj-in{border-top:1px solid var(--line)}
.pj-info dl{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:0;
}
.pj-info div{
  padding:clamp(26px,3.4vw,44px) clamp(14px,2vw,28px) clamp(26px,3.4vw,44px) 0;
  border-bottom:1px solid var(--line);
}
.pj-info dt{
  font-family:var(--disp);font-weight:900;font-size:10px;
  letter-spacing:.28em;color:var(--muted);margin-bottom:14px;
}
.pj-info dd{
  margin:0;font-family:var(--disp);font-weight:900;
  font-size:clamp(15px,1.55vw,21px);line-height:1.45;color:var(--ev-ink);
  letter-spacing:.01em;
}
.pj-info dd small{
  display:block;font-family:var(--body);font-weight:700;
  font-size:12px;letter-spacing:.08em;color:var(--muted);margin-top:8px;
}

/* 4. 大きな写真 ---------------------------------------------- */
/* 節が続くので上の余白は詰める。単独で置くときはこの行を外す */
.pj-figure{padding-top:0}
.pj-big{margin:0}
.pj-big .frame{aspect-ratio:16/7}
.pj-pair{
  margin-top:clamp(14px,1.6vw,24px);
  display:grid;grid-template-columns:1fr 1fr;gap:clamp(14px,1.6vw,24px);
}
.pj-pair .frame{aspect-ratio:4/3}
.pj-cap{
  margin-top:clamp(14px,1.8vw,22px);
  font-size:12px;letter-spacing:.08em;color:var(--muted);
}

/* 写真の枠。画像が入ればそのまま、無ければ受け皿として見せる */
.frame{
  position:relative;overflow:hidden;background:var(--tint);
  display:grid;place-items:center;
}
.frame img{
  width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .8s cubic-bezier(.2,.7,.2,1);
}
@media (hover:hover){.frame:hover img{transform:scale(1.035)}}
.frame:not(:has(img)){
  background:transparent;border:1px dashed var(--line);
  font-family:var(--disp);font-weight:900;font-size:10px;
  letter-spacing:.24em;color:var(--muted);
}

/* 5. WHY WE CREATED IT --------------------------------------- */
.pj-why{background:var(--tint)}
.pj-why .pj-label{margin-bottom:clamp(20px,2.6vw,30px)}
.pj-why .pj-h{margin-bottom:clamp(30px,4vw,52px);max-width:16em}

/* 6. STORY --------------------------------------------------- */
.pj-story{padding-bottom:clamp(40px,6vw,72px)}
.pj-story + .pj-story{padding-top:0}
.pj-story .pj-in{
  display:grid;grid-template-columns:1fr 1fr;
  gap:clamp(28px,5vw,80px);align-items:center;
}
.pj-story .frame{aspect-ratio:4/3}
.pj-story .num{
  display:block;font-family:var(--disp);font-weight:900;
  font-size:11px;letter-spacing:.3em;color:var(--ev-key);
  margin-bottom:clamp(16px,2vw,24px);
}
.pj-story h3{
  font-family:var(--disp);font-weight:900;
  font-size:clamp(23px,3.1vw,42px);line-height:1.3;
  color:var(--ev-ink);margin-bottom:clamp(20px,2.6vw,30px);
}

/* 7. MOMENTS ------------------------------------------------- */
.pj-moments{background:var(--ink)}
.pj-moments .pj-label{color:var(--accent-soft)}
.pj-moments .pj-h{color:#fff;margin:clamp(18px,2.2vw,26px) 0 clamp(36px,5vw,64px)}
.pj-grid{
  display:grid;grid-template-columns:repeat(6,minmax(0,1fr));
  grid-auto-rows:clamp(96px,11.5vw,168px);
  gap:clamp(10px,1.2vw,18px);
}
.pj-grid .frame{background:rgba(255,255,255,.06)}
.pj-grid .frame:not(:has(img)){border-color:rgba(255,255,255,.22);color:rgba(255,255,255,.45)}
.pj-grid .m1{grid-column:1/4;grid-row:1/3}
.pj-grid .m2{grid-column:4/7;grid-row:1/2}
.pj-grid .m3{grid-column:4/6;grid-row:2/3}
.pj-grid .m4{grid-column:6/7;grid-row:2/3}
.pj-grid .m5{grid-column:1/3;grid-row:3/4}
.pj-grid .m6{grid-column:3/7;grid-row:3/4}

/* 8. IMPACT -------------------------------------------------- */
.pj-impact .pj-label{margin-bottom:clamp(20px,2.6vw,30px)}
.pj-impact .pj-h{margin-bottom:clamp(30px,4vw,52px);max-width:16em}
.pj-nums{
  margin-top:clamp(48px,7vw,88px);padding-top:clamp(32px,4vw,48px);
  border-top:2px solid var(--ev-ink);
  display:flex;gap:clamp(36px,7vw,110px);flex-wrap:wrap;
}
.pj-nums .n{
  font-family:var(--disp);font-weight:900;
  font-size:clamp(40px,6vw,88px);line-height:1;color:var(--ev-ink);
}
.pj-nums .n em{
  font-style:normal;font-family:var(--body);font-weight:700;
  font-size:.34em;margin-left:.25em;color:var(--ev-key);
}
.pj-nums .k{
  margin-top:12px;font-size:13px;font-weight:700;
  letter-spacing:.14em;color:var(--muted);
}

/* 戻る ------------------------------------------------------- */
.pj-back{padding:0 var(--gutter) clamp(84px,12vw,150px)}
.pj-back .back{color:var(--ev-ink);border-bottom-color:var(--ev-ink)}

/* 登場 ------------------------------------------------------- */
.js .pj-hero-in>*{opacity:0;transform:translateY(24px);transition:opacity .9s ease,transform 1s cubic-bezier(.16,.84,.24,1)}
.js .pj-hero-in>*:nth-child(2){transition-delay:.12s}
.js .pj-hero-in>*:nth-child(3){transition-delay:.26s}
.js .pj-hero.is-in .pj-hero-in>*{opacity:1;transform:none}

/* 狭い画面 --------------------------------------------------- */
@media (max-width:900px){
  .pj-intro .pj-in{grid-template-columns:1fr;gap:clamp(20px,4vw,28px)}
  .pj-intro .pj-label{position:static}
  .pj-info dl{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pj-story .pj-in{grid-template-columns:1fr;gap:clamp(22px,4vw,32px)}
  .pj-grid{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:clamp(120px,32vw,190px)}
  .pj-grid .m1{grid-column:1/3;grid-row:auto}
  .pj-grid .m2,.pj-grid .m3,.pj-grid .m4,.pj-grid .m5{grid-column:auto;grid-row:auto}
  .pj-grid .m6{grid-column:1/3;grid-row:auto}
  .pj-pair{grid-template-columns:1fr}
  .pj-big .frame{aspect-ratio:3/2}
  .pj-hero-lead{font-size:clamp(16px,4.6vw,20px)}
}
@media (max-width:520px){
  .pj-info dl{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  .frame img{transition:none}
  .js .pj-hero-in>*{opacity:1;transform:none;transition:none}
}

/* ============================================================
   物語を運ぶための追加パーツ
   ============================================================ */

/* ヒーローの主となる言葉 */
.pj-hero-msg{
  margin-top:clamp(30px,4vw,48px);
  font-family:var(--disp);font-weight:900;
  font-size:clamp(22px,3.4vw,46px);line-height:1.42;letter-spacing:-.01em;
  color:var(--ev-ink);
}
.pj-hero-msg::before{
  content:"";display:block;width:clamp(48px,6vw,96px);height:2px;
  background:var(--ev-ink);margin-bottom:clamp(20px,2.6vw,32px);
}
.pj-hero-sub{
  margin-top:clamp(18px,2.2vw,26px);
  font-size:clamp(14px,1.42vw,18px);font-weight:500;line-height:1.9;
  color:rgba(20,22,26,.66);
}

/* 節のはじめを大きく置く一文 */
.pj-lede{
  font-size:clamp(19px,2.5vw,34px);font-weight:700;line-height:1.72;
  color:var(--ev-ink);margin-bottom:1.3em;letter-spacing:-.01em;
}

/* 落ち着いた地色の節 */
.pj-quiet{background:var(--tint)}

/* 節の頭に太い罫を置く */
.pj-topline .pj-in{border-top:2px solid var(--ev-ink);padding-top:clamp(30px,4vw,52px)}

/* 本文のなかで一段強くみせる行 */
.pj-strong{
  display:block;margin-top:1.7em;
  font-size:clamp(16px,1.72vw,23px);font-weight:700;line-height:1.85;
  color:var(--ev-ink);
}

/* 体験の並び。箇条書きに見せない */
.pj-terms{
  margin:clamp(28px,3.6vw,44px) 0;padding:0;list-style:none;
  display:flex;flex-wrap:wrap;gap:8px 10px;
}
.pj-terms li{
  border:1px solid color-mix(in srgb,var(--ev-ink) 34%,transparent);
  border-radius:999px;padding:9px 16px;
  font-size:clamp(12px,1.16vw,15px);font-weight:700;color:var(--ev-ink);
}
@supports not (border-color:color-mix(in srgb,#000 50%,transparent)){
  .pj-terms li{border-color:var(--line)}
}

/* 大きな文字だけの節 */
.pj-philosophy{
  padding:clamp(110px,18vw,220px) var(--gutter);
  background:var(--paper);text-align:center;
}
.pj-philosophy p{
  font-family:var(--disp);font-weight:900;
  font-size:clamp(30px,6.4vw,86px);line-height:1.34;letter-spacing:-.02em;
  color:var(--ev-ink);
}
.pj-philosophy small{
  display:block;margin-top:clamp(30px,4vw,52px);
  font-family:var(--disp);font-weight:700;
  font-size:clamp(10px,1.02vw,13px);letter-spacing:.2em;line-height:2;
  color:var(--muted);
}

/* 次のプロジェクトへ */
.pj-next{
  display:block;border-top:1px solid var(--line);
  padding:clamp(56px,8vw,96px) var(--gutter);
  background:var(--paper);transition:background .35s ease;
}
@media (hover:hover){.pj-next:hover{background:var(--tint)}}
.pj-next .pj-in{display:flex;align-items:baseline;justify-content:space-between;gap:20px;flex-wrap:wrap}
.pj-next .lbl{
  display:block;font-family:var(--disp);font-weight:900;
  font-size:10px;letter-spacing:.32em;color:var(--ev-key);margin-bottom:14px;
}
.pj-next .ttl{
  font-family:var(--disp);font-weight:900;
  font-size:clamp(28px,5vw,64px);line-height:1.14;color:var(--ev-ink);
  letter-spacing:-.01em;
}
.pj-next .arw{
  font-family:var(--disp);font-weight:900;font-size:clamp(20px,2.6vw,34px);
  color:var(--ev-ink);transition:transform .35s cubic-bezier(.2,.7,.2,1);
}
@media (hover:hover){.pj-next:hover .arw{transform:translateX(10px)}}