/* =========================================================================
   v2 モチーフ層 — 印刷物・紙・マーカーの手触り
   style.css（v1）の上に重ね、差分だけを書く。
   ========================================================================= */

:root {
  --f-script: 'Kaushan Script', 'Brush Script MT', cursive;
  --rail: clamp(0px, 8vw, 128px);
}

/* ---------- 素材 ---------- */
.paper { background: var(--paper) url('../img/paper.jpg') center / 900px auto; }
.concrete { background: var(--black); }

/* 古い版画のかすれ（インクの欠け） */
.distress {
  -webkit-mask-image: url('../img/grunge-wear.png'), linear-gradient(#000 0 0);
  -webkit-mask-size: 260px 260px, 100% 100%;
  -webkit-mask-composite: xor;
  mask-image: url('../img/grunge-wear.png'), linear-gradient(#000 0 0);
  mask-size: 260px 260px, 100% 100%;
  mask-composite: exclude;
}

/* 破れた紙の縁（紙のセクションの上下へ貼る） */
.tear {
  position: absolute; left: -2vw; right: -2vw; height: clamp(34px, 4.6vw, 72px); z-index: 6; pointer-events: none;
  background: var(--paper) url('../img/paper.jpg') center / 900px auto;
  -webkit-mask: url('../img/torn-edge.png') left top / auto 100% repeat-x;
  mask: url('../img/torn-edge.png') left top / auto 100% repeat-x;
}
.tear--up { bottom: calc(100% - 2px); transform: scaleY(-1); }
.tear--down { top: -2px; }

/* 筆・引っかき（色は background で塗る） */
.stroke { position: absolute; display: block; pointer-events: none; background: var(--lime); }
.stroke--slash { -webkit-mask: url('../assets/img/brush-slash.png') center / contain no-repeat; mask: url('../assets/img/brush-slash.png') center / contain no-repeat; }
.stroke--scratch { -webkit-mask: url('../img/scratch.png') center / contain no-repeat; mask: url('../img/scratch.png') center / contain no-repeat; }
.stroke--edge { -webkit-mask: url('../img/edge-brush.png') center / 100% 100% no-repeat; mask: url('../img/edge-brush.png') center / 100% 100% no-repeat; }

/* 手描きマーカー（画面に入る／状態が変わると左から描かれる） */
.mk {
  position: absolute; display: block; pointer-events: none; background: var(--lime);
  clip-path: inset(-5% 101% -5% -5%);
  transition: clip-path 0.9s var(--ease-cut);
}
.mk--circle { -webkit-mask: url('../img/mk-circle.png') center / 100% 100% no-repeat; mask: url('../img/mk-circle.png') center / 100% 100% no-repeat; }
.mk--underline { -webkit-mask: url('../img/mk-underline.png') center / 100% 100% no-repeat; mask: url('../img/mk-underline.png') center / 100% 100% no-repeat; }
.mk--arrow { -webkit-mask: url('../img/mk-arrow.png') center / 100% 100% no-repeat; mask: url('../img/mk-arrow.png') center / 100% 100% no-repeat; }
.mk--tally { -webkit-mask: url('../img/mk-tally.png') center / 100% 100% no-repeat; mask: url('../img/mk-tally.png') center / 100% 100% no-repeat; }
.mk--scrape { -webkit-mask: url('../img/mk-scrape.png') center / 100% 100% no-repeat; mask: url('../img/mk-scrape.png') center / 100% 100% no-repeat; }
.mk--check { -webkit-mask: url('../img/mk-marks.png') right center / 200% 100% no-repeat; mask: url('../img/mk-marks.png') right center / 200% 100% no-repeat; }
.mk.is-in,
.role.is-active .role__mk,
.step.is-on .step__mk,
.step.is-on .step__circle { clip-path: inset(-5% -5% -5% -5%); }

/* 小さな注記（誌面の欄外の文字） */
.anno { font-family: var(--f-en); font-weight: 400; font-size: 12px; line-height: 1.32; letter-spacing: 0.1em; text-transform: uppercase; }

/* 長い矢印つきリンク */
.arrow-link {
  display: inline-flex; align-items: center; gap: 16px; margin-top: 28px;
  font-size: 11px; font-weight: 700; letter-spacing: 0.22em;
}
.arrow-link::after {
  content: ''; width: 46px; height: 10px; background: currentColor;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9 10'><path d='M1 1l6 4-6 4' fill='none' stroke='black' stroke-width='1.3'/></svg>") right center / 9px 10px no-repeat, linear-gradient(#000 0 0) left center / 100% 1.3px no-repeat;
  mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9 10'><path d='M1 1l6 4-6 4' fill='none' stroke='black' stroke-width='1.3'/></svg>") right center / 9px 10px no-repeat, linear-gradient(#000 0 0) left center / 100% 1.3px no-repeat;
  transition: width 0.5s var(--ease-out);
}
.arrow-link:hover::after { width: 72px; }
.arrow-link--ink { color: var(--black); }

/* 丸矢印リンク */
.circle-link { display: inline-flex; align-items: center; gap: 14px; font-family: var(--f-en); font-size: 18px; letter-spacing: 0.05em; color: var(--lime); }
.circle-link__icon { display: grid; place-items: center; width: 46px; height: 46px; border: 1.5px solid currentColor; border-radius: 50%; font-size: 17px; transition: background-color 0.3s, color 0.3s; }
.circle-link:hover .circle-link__icon { background: var(--lime); color: var(--black); }

/* 版ズレ（見出しの下に1版ずれた青） */
.misreg { text-shadow: 0.02em 0.012em 0 rgba(23, 92, 255, 0.5); }

/* =========================================================================
   HERO
   ========================================================================= */
.hero__stage { background: #050505; }
.hero__type { left: calc(var(--gutter) + var(--rail) - 0.04em); }
.hero__typeInner { text-shadow: 0.014em 0.01em 0 rgba(23, 92, 255, 0.6), -0.01em -0.006em 0 rgba(185, 255, 41, 0.28); }
.hero__person { right: 17vw; }
.hero__copy { left: calc(var(--gutter) + var(--rail)); }
.hero__slash { left: 47%; top: 14%; width: 40vw; }


.hero__scratch { left: -3vw; top: -2vh; width: 26vw; height: 9vw; background: var(--red); transform: rotate(-22deg); opacity: 0.9; }
.hero__edgeBlue { left: calc(100% - 2vw - 40vh); top: calc(58vh - 2vw); width: 80vh; height: 4vw; background: var(--blue); }
.hero__edgeBlue { transform: rotate(-90deg); }

.hero__words { display: block; position: absolute; left: var(--gutter); top: calc(66px + 4vh); z-index: 5; color: var(--ink-soft); }
.hero__words li { position: relative; transition: color 0.4s; }
.hero__words li.is-on { color: var(--lime); }
.hero__words li.is-on::before { content: ''; position: absolute; left: -12px; top: 50%; width: 6px; height: 1.5px; background: var(--lime); }
.hero__motto { position: absolute; left: var(--gutter); bottom: 10vh; z-index: 5; color: var(--ink-soft); }
.hero__motto::after { content: ''; display: block; width: 22px; height: 1.5px; margin-top: 14px; background: var(--paper); }

.hero__script { right: 22vw; bottom: 15vh; font-size: clamp(28px, 2.9vw, 50px); line-height: 1.02; transform: rotate(-16deg); }
.hero__side { top: 13vh; width: 150px; }
.hero__sideJa { font-size: 14px; }
.hero__sideAnno { margin-top: 22px; color: var(--ink-soft); }
.hero__sideEn { margin-top: 26vh; font-size: clamp(22px, 1.9vw, 30px); color: var(--paper); letter-spacing: 0.02em; line-height: 1; }
.hero__sideEn::before { margin-bottom: 18px; }
.hero__side .circle-link { margin-top: 5vh; }

/* 操作しているキャラクターが円の中だけ現れる */
.hero__avatar {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; object-position: bottom center;
  pointer-events: none;
  --r: 0px; --sx: 50%; --sy: 30%;
  -webkit-mask-image: radial-gradient(circle var(--r) at var(--sx) var(--sy), #000 0%, #000 40%, rgba(0,0,0,0.75) 60%, rgba(0,0,0,0.4) 75%, rgba(0,0,0,0.12) 88%, transparent 100%);
  mask-image: radial-gradient(circle var(--r) at var(--sx) var(--sy), #000 0%, #000 40%, rgba(0,0,0,0.75) 60%, rgba(0,0,0,0.4) 75%, rgba(0,0,0,0.12) 88%, transparent 100%);
}
.hero__clip img.hero__avatar.is-breathing { animation: breath 7s ease-in-out infinite alternate; transform-origin: 50% 90%; }

/* =========================================================================
   MISSION（紙が一枚、斜めに叩きつけられて水平に落ち着く）
   ========================================================================= */
.mission {
  clip-path: none; overflow: visible; min-height: 0;
  padding: 14vh 0 13vh;
  left: -4vw; width: calc(100% + 8vw); padding-left: 4vw; padding-right: 4vw;
  transform-origin: 100% 0;
  will-change: transform;
}
/* 案B（2026-09-26 承認「Bで」）：大見出しを横いっぱい → 写真1枚＋本文。本文の列を十分に取り、細切れの改行をなくす */
.mission__grid { display: block; }
.mission__label { margin-bottom: 0 !important; }
.mission__title { margin-top: 4vh; }
.mission__l2 { padding-left: 0.4em; }
.mission__title em { color: var(--black); }
.mission__hl { inset: 0.1em -0.18em 0.02em -0.16em; background: var(--lime); z-index: 0; }
.mission__title em span { position: relative; z-index: 1; }
.mission__row { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: 24px; margin-top: 6vh; align-items: center; }
.mission__photo { margin: 0; clip-path: none; }
.mission__photo--hands { grid-column: 1 / 8; grid-row: 1; position: relative; overflow: hidden; } /* style.css の grid-row: 4 を打ち消して本文と同じ段へ */
.mission__photo--hands img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.mission__tag { position: absolute; left: 16px; top: 16px; z-index: 1; padding: 4px 8px; background: var(--paper); color: var(--black); font-family: var(--f-en); font-weight: 700; font-size: 12px; letter-spacing: 0.2em; }
.mission__body { grid-column: 9 / 13; grid-row: 1; padding-bottom: 0; }
.mission__body .mission__ja { margin: 0 0 16px; }
@media (max-width: 1100px) { .mission__body { grid-column: 8 / 13; } }

/* =========================================================================
   DO / DO / DO
   ========================================================================= */
.dos::before { display: none; }
.dos__panel--1 { background: var(--black); }
.dos__panel--3 { background: var(--paper) url('../img/paper.jpg') center / 900px auto; }
.dos .tear { z-index: 7; }
.dos__count { position: absolute; right: var(--gutter); bottom: 11vh; display: flex; align-items: center; gap: 20px; }
.dos__idx { position: static; }
.dos__tally { position: relative; width: 70px; height: 70px; background: currentColor; }
.dos[data-step='0'] .dos__tally { clip-path: inset(-5% 62% -5% -5%); }
.dos[data-step='1'] .dos__tally { clip-path: inset(-5% 36% -5% -5%); }
.dos[data-step='2'] .dos__tally { clip-path: inset(-5% -5% -5% -5%); }

/* =========================================================================
   RECRUIT ROLES
   ========================================================================= */
.roles::before { display: none; }
.roles__stage { background: var(--black); }
.roles .tear { z-index: 7; }
.roles__intro { background: linear-gradient(90deg, rgba(10,10,10,0.94) 80%, rgba(10,10,10,0)); }
.roles__link { color: var(--paper); }
.role__name { position: relative; display: inline-block; }
.role__mk { left: -4%; right: -8%; bottom: -0.32em; height: 0.3em; background: var(--ac); }
.role__more { color: var(--paper); }
.roles__panel {
  position: absolute; right: 0; top: 0; bottom: 0; z-index: 4; width: clamp(120px, 12vw, 190px);
  background: #b9b5ad url('../img/paper.jpg') center / 900px auto; background-blend-mode: multiply;
  clip-path: polygon(14% 0, 100% 0, 100% 100%, 8% 100%, 12% 91%, 4% 83%, 10% 74%, 2% 63%, 9% 54%, 3% 43%, 11% 33%, 5% 21%, 12% 11%);
  display: grid; place-items: center;
}
.roles__panel p { font-family: var(--f-script); color: var(--black); font-size: clamp(24px, 2.2vw, 36px); line-height: 1.05; transform: rotate(-12deg); margin-left: 12%; }

/* =========================================================================
   TEAM SYSTEM（スクロール量＝カードの伸縮。止まる区間をつくらない）
   ========================================================================= */
.team::before { display: none; }
.team .tear { z-index: 7; }
.team__stage { background: var(--paper) url('../img/paper.jpg') center / 900px auto; }
.team__script { color: var(--paper); padding: 0.5em 0.9em; margin: 3vh 0 2vh -0.4em; transform: rotate(-7deg); font-size: clamp(20px, 1.8vw, 30px); }
.team__brush { inset: -6% -8%; background: var(--blue); }
.team__script span { position: relative; }
.team__deck { position: relative; }
.team__hl { left: 0; bottom: -3.2vh; width: 100px; height: 5.4vh; background: var(--blue); transform-origin: left center; opacity: 0.95; }
.team__cards { position: relative; z-index: 1; }
.tcard { --w: 0; transition: none; }
.tcard.is-active { flex-grow: 1; }
.tcard img { filter: grayscale(1) contrast(1.1); transform: scale(calc(1.14 - var(--w) * 0.14)); transition: none; }
.tcard.is-active img { filter: grayscale(1) contrast(1.1); transform: scale(calc(1.14 - var(--w) * 0.14)); }
.tcard__shade { position: absolute; inset: 0; background: #000; opacity: calc(0.62 - var(--w) * 0.52); z-index: 1; }
.tcard::after { z-index: 1; }
.tcard::before { content: ''; position: absolute; left: 0; top: 0; width: 100%; height: 4px; background: var(--blue); z-index: 3; transform-origin: left; transform: scaleX(var(--w)); animation: none !important; }
.tcard__v {
  position: absolute; left: 50%; bottom: 24px; z-index: 2;
  writing-mode: vertical-rl; transform: translateX(-50%) rotate(180deg);
  font-family: var(--f-en); font-size: clamp(20px, 1.6vw, 28px); letter-spacing: 0.04em; white-space: nowrap;
  opacity: calc(1 - var(--w) * 2.2);
}
.tcard__txt {
  left: 24px; right: auto; bottom: 24px; width: min(320px, 26vw); z-index: 2;
  opacity: clamp(0, calc((var(--w) - 0.45) * 3), 1);
  transform: translate3d(0, calc((1 - var(--w)) * 24px), 0);
}
.tcard__no { display: block; font-family: var(--f-en); font-size: 13px; letter-spacing: 0.08em; color: var(--lime); margin-bottom: 8px; }
.tcard h3 { transform: scale(calc(1 + var(--w) * 0.5)); transition: none; }
.tcard.is-active h3 { transform: scale(calc(1 + var(--w) * 0.5)); }
.tcard p { white-space: normal; }
.tcard__more { max-height: none; opacity: 1; margin-top: 10px !important; }
.team__bar i { transition: none; }

/* =========================================================================
   MEMBERS
   ========================================================================= */
.members__script { margin-top: 18px; font-family: var(--f-script); font-size: clamp(22px, 2vw, 32px); line-height: 1.05; transform: rotate(-8deg); transform-origin: left; }
.mslide__giant { font-size: 54vh; }
.mslide__brush {
  position: absolute; left: 30%; top: 30%; width: 62vw; height: 30vw; background: var(--ac);
  -webkit-mask: url('../assets/img/brush-slash.png') center / contain no-repeat; mask: url('../assets/img/brush-slash.png') center / contain no-repeat;
  transform: translate3d(calc(var(--mx, 0) * -18px + (1 - var(--copy)) * -8vw), 0, 0) rotate(-8deg) scaleX(calc(0.4 + var(--copy) * 0.6));
  transform-origin: left center; opacity: 0.95;
}
.mslide__quote { position: absolute; }
.mslide__qmk { left: -2%; right: 12%; bottom: -14px; height: 14px; background: var(--ac); clip-path: inset(-5% calc(101% - var(--k) * 106%) -5% -5%); transition: none; }

/* =========================================================================
   JOIN FLOW
   ========================================================================= */
.flow { overflow: hidden; }
.flow__stroke { left: 38%; top: 6vh; width: 70vw; height: 26vw; background: var(--blue); opacity: 0.9; transform: rotate(-6deg); }
.flow .wrap { position: relative; z-index: 1; }
.step h3 { position: relative; display: inline-block; }
.step__mk { right: auto; left: calc(100% - 38px); top: 6px; width: 34px; height: 34px; background: var(--lime); }
.step:last-child h3 { color: var(--lime); }
.step__circle { left: -18px; top: 52px; width: 150px; height: 92px; background: var(--lime); }

/* =========================================================================
   FINAL ENTRY
   ========================================================================= */
.final__bg { inset: 9vh -2vw 13vh 48%; clip-path: polygon(4% 0, 100% 0, 100% 100%, 0 100%, 3% 62%, 0 30%); }
.final__bg::after { background: linear-gradient(90deg, rgba(10,10,10,0.75), rgba(10,10,10,0.1) 50%, rgba(10,10,10,0.35)); }
.final__label { position: absolute; left: var(--gutter); top: 12vh; }
.final__title { top: 20vh; transform: skewX(-9deg); transform-origin: left bottom; font-size: clamp(76px, 11.5vw, 196px); }
.final__underline { left: calc(var(--gutter) + 8vw); top: calc(20vh + clamp(76px, 11.5vw, 196px) * 1.62); width: 46vw; height: 9vw; background: var(--blue); clip-path: inset(0 100% 0 0); }
.final__scratch { right: -2vw; top: 4vh; width: 24vw; height: 8vw; background: var(--lime); transform: rotate(-14deg); opacity: 0.85; }

.footer { position: relative; }
.footer__anno { position: absolute; right: var(--gutter); bottom: 100%; margin-bottom: -6px; color: var(--ink-dim); text-align: right; display: none; }

/* =========================================================================
   SP
   ========================================================================= */
@media (max-width: 899px) {
  :root { --rail: 0px; }
  .hero__words, .hero__motto, .hero__edgeBlue, .hero__side { display: none; }
  .hero__person { right: -14vw; }
  .hero__scratch { width: 50vw; height: 16vw; }
  .mission { left: -6vw; width: calc(100% + 12vw); padding: 12vh 6vw 10vh; }
  .mission__grid { display: block; }
  .mission__photo--hands { width: 46vw; margin-top: 4vh; }
  .mission__photo--back { width: 52vw; margin: -18vh 0 0 auto; }
  .mission__script { margin: 2vh 0 0; }
  .mission__anno, .mission__arrow { display: none; }
  .mission__body { margin-top: 4vh; }
  .roles__panel { display: none; }
  .team__hl { display: none; }
  .tcard { --w: 1; }
  .tcard__v { display: none; }
  .tcard__txt { width: auto; right: 20px; }
  .flow__stroke { width: 120vw; height: 46vw; left: 10%; }
  .final__bg { inset: 38vh -4vw 30vh 20%; }
  .final__underline { top: calc(14vh + 17vw * 1.8); left: var(--gutter); width: 80vw; height: 18vw; }
  .final__label { top: 8vh; }
}

@media (prefers-reduced-motion: reduce) {
  .mission { left: 0; width: auto; padding-left: 0; padding-right: 0; }
  .mk { clip-path: none; }
  .tcard { --w: 1; }
  .tcard__v { display: none; }
  .hero__avatar { display: none; }
}

/* =========================================================================
   v2.1 整理：筆（ペンキ状の払い）をやめ、ハイライトは平らな色面にする
   ========================================================================= */
.mission__hl { -webkit-mask: none; mask: none; inset: 0.14em -0.1em 0.06em -0.1em; }
.team__hl { -webkit-mask: none; mask: none; bottom: -14px; height: 5px; clip-path: none; transition: none; }

/* MEMBERS の見出し：反転合成はやめ、前面の人の文字色に合わせる（ライム上で紫に化けるため） */
.members__head, .members__count { mix-blend-mode: normal; color: var(--members-fg, #F2EFE8); transition: opacity 0.5s, color 0.4s; }

@media (max-width: 899px) {
  .hero__type { top: calc(58px + 3vh); font-size: 31vw; }
  .hero__typeInner { flex-wrap: nowrap; width: auto; }
  .mission__photo--back { width: 60vw; margin: 5vh 0 0 auto; }
  .members__title { display: none; }
}

/* スマホで紙の演出（少し広い紙・破れ縁）が画面幅を押し広げないよう、本文の外側で横だけ切る。
   clip はスクロール領域を作らないので、画面に留まる演出（sticky）は壊れない */
main { overflow-x: clip; }

/* MISSION 案B のスマホ：写真 → 本文の縦並び */
@media (max-width: 899px) {
  .mission__row { display: block; margin-top: 5vh; }
  .mission__photo--hands { width: auto; margin: 0; }
  .mission__body { margin-top: 4vh; }
}