@charset "utf-8";
/* ============================================================
   アイドル前夜。 トップ画面（見本の HERO IMAGE を再現）
   写真はカラーのまま。網点・紙テクスチャは使わない
   ============================================================ */

:root{
  --purple:#6C3ED5;
  --purple-deep:#5029B0;
  --black:#111111;
  --gray:#F2F2F5;
  --white:#FFFFFF;

  --f:"Noto Sans JP","Hiragino Sans","Hiragino Kaku Gothic ProN",sans-serif;

  --pad:20px;
}
@media (min-width:768px){ :root{ --pad:clamp(40px,5vw,72px); } }

*,*::before,*::after{ box-sizing:border-box; }
body,h1,p{ margin:0; }
img{ max-width:100%; height:auto; display:block; }
body{ background:var(--white); font-family:var(--f); color:var(--black); }

/* ---------- 全体 ---------- */
.hero{
  position:relative;
  min-height:min(100svh, 760px);
  display:flex;
  align-items:stretch;
  padding:clamp(36px,6vw,72px) var(--pad);
  overflow:hidden;
  isolation:isolate;
}

/* 1. 背景の写真（カラーのまま） */
.hero__bg{
  position:absolute; inset:0; z-index:0;
  /* 人物を右寄りに置く。
     写真は横1.8:1で、画面いっぱいに敷くと横の余りがほとんど無い。
     そこで132%に拡大し、左端を基準に置くことで
     中央にいる人物が画面の右側へ寄る（切り抜き・加工はしていない） */
  background:url(../assets/photo/hero-main.jpg) 0% 38% / 132% auto no-repeat;
  background-color:var(--white);
}

/* 写真の左側を白っぽく明るくして、ロゴと文字を読めるようにする。
   右へ向かってなめらかに消えるので、写真の見せ場（逆光と客席）は残る */
.hero__wash{
  position:absolute; inset:0; z-index:1;
  background:linear-gradient(100deg,
    rgba(255,255,255,.96)  0%,
    rgba(255,255,255,.93) 28%,
    rgba(255,255,255,.84) 44%,
    rgba(255,255,255,.56) 58%,
    rgba(255,255,255,.20) 73%,
    rgba(255,255,255,0)   88%);
}
/* 下端をわずかに白く締めて、紫の箱と飛沫を置きやすくする */
.hero__wash::after{
  content:"";
  position:absolute; left:0; right:0; bottom:0; height:34%;
  background:linear-gradient(to top, rgba(255,255,255,.55), rgba(255,255,255,0));
}

/* ---------- 2〜3. ロゴとキャッチコピー ---------- */
.hero__in{
  position:relative; z-index:3;
  width:100%;
  max-width:1240px;
  margin-inline:auto;
  /* 高さを親いっぱいに取る。帯の「右下」の基準になる */
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:flex-start;   /* テープやボタンを内容の幅にとどめる */
}
.hero__logo{
  width:min(88%, 530px);
  /* SVGの左に6.36%の余白があるので、そのぶん引いて文字の左端に揃える */
  margin-left:-6.36%;
}
/* ---------- 経験者お断りのテープ ---------- */
.hero__tape{
  display:inline-block;
  margin-top:clamp(14px,2.2vw,22px);
  background:var(--black);
  color:var(--white);
  font-size:clamp(12px,1.9vw,18px);
  font-weight:700;
  letter-spacing:.05em;
  line-height:1.5;
  padding:8px 16px;
  transform:rotate(-1.1deg);
}

/* ---------- サブコピー ---------- */
.hero__sub{
  margin-top:clamp(20px,3vw,32px);
  font-size:clamp(13px,1.9vw,18px);
  font-weight:500;
  letter-spacing:.06em;
  line-height:1.9;
  color:var(--black);
}

/* ---------- メインコピー。FVでいちばん大きい ---------- */
.hero__main{
  margin-top:clamp(8px,1.4vw,14px);
  font-size:clamp(30px,6.6vw,68px);
  font-weight:800;
  line-height:1.42;
  letter-spacing:.005em;
  color:var(--black);
}
.hero__main em{ font-style:normal; color:var(--purple); }

/* ---------- 応募ボタン ---------- */
.hero__cta{ margin-top:clamp(24px,3.6vw,40px); }
.btn{
  position:relative;
  display:inline-flex;
  align-items:center;
  gap:14px;
  min-height:clamp(52px,5.4vw,66px);
  padding:0 clamp(24px,2.8vw,38px);
  background:var(--black);
  color:var(--white);
  text-decoration:none;
  font-size:clamp(15px,1.8vw,19px);
  font-weight:700;
  letter-spacing:.08em;
  box-shadow:7px 7px 0 var(--purple);
  transition:transform .18s ease, box-shadow .18s ease;
}
.btn:hover,.btn:focus-visible{
  transform:translate(3px,3px);
  box-shadow:4px 4px 0 var(--purple);
}
/* 吹き出しの形をした小さな印 */
.btn__ic{
  width:26px; height:26px;
  border-radius:50% 50% 50% 4px;
  background:var(--purple);
  flex:0 0 auto;
}


/* ---------- 4. 右下の紫の帯（用意された筆ストロークの画像） ----------
   brush.webp をそのまま貼る。切り抜き・変形・引き伸ばしはしない。
   画像は 2172x724 で、絵柄は上下に大きな余白を持つ
   （絵柄は y 210〜501 ＝ 高さの40%だけ。中心はほぼ真ん中）。
   そのため画像の高さ＝帯の厚みではない点に注意。
   帯の厚み ≒ 画像の幅 × 0.134

   横方向の濃さも一定ではない（実測）。
   幅の10%〜85%が濃く、両端はかすれて消える。
   文字はこの濃い範囲に置き、かすれた右端は画面外へ逃がす        */
.hero__badge{
  position:absolute; z-index:4;
  right:-6.5%;         /* かすれた右端を画面の外へ出す（実測で調整） */
  bottom:-13%;         /* 吹き出しと離すため、さらに下げる */
  /* 長さは元の7割 */
  width:clamp(350px,41vw,575px);
  /* 縦にだけ引き伸ばして帯を太くする。
     元の比率は 1 : 0.333。ここでは 1 : 0.783 ＝ 縦へ約2.35倍。
     結果、帯の厚みは約1.65倍になる                       */
  aspect-ratio:1.277 / 1;
  margin:0; padding:0;
  transform:rotate(-4deg);
}
.hero__badge-brush{
  display:block;
  width:100%;
  height:100%;
  object-fit:fill;     /* 縦横を別々に伸ばす */
}
/* 文字は帯の厚い側（右寄り）に置く。左端は穂先が割れていて乗らない */
.hero__badge-t{
  position:absolute;
  right:37%;           /* 帯の濃い範囲、かつ画面内に収まる位置（実測で調整） */
  top:50%;
  transform:translateY(-50%);
  color:var(--white);
  font-size:clamp(15px,1.9vw,23px);
  font-weight:700;
  letter-spacing:.1em;
  line-height:1.45;
  text-align:center;
  text-shadow:0 1px 3px rgba(40,12,100,.5);
  white-space:nowrap;
}
.hero__badge-t span{ display:block; }

/* ---------- 5. 紫のインク飛沫 ---------- */
.splat{
  position:absolute; z-index:2;
  background:var(--purple);
  pointer-events:none;
}
.splat--l{
  width:clamp(150px,20vw,260px); aspect-ratio:1;
  left:-3%; bottom:-4%;
  transform:rotate(-18deg);
  opacity:.85;
  -webkit-mask:url(../assets/texture/ink-a.webp) center/contain no-repeat;
          mask:url(../assets/texture/ink-a.webp) center/contain no-repeat;
}
.splat--r{
  width:clamp(110px,13vw,180px); aspect-ratio:1;
  right:clamp(160px,24vw,330px); bottom:-2%;
  transform:rotate(24deg);
  opacity:.62;
  -webkit-mask:url(../assets/texture/ink-b.webp) center/contain no-repeat;
          mask:url(../assets/texture/ink-b.webp) center/contain no-repeat;
}

/* ---------- スマホ ----------
   写真を主役にする。画面上部の半分以上を写真が占め、
   ロゴと「経験者は募集しません」を写真の上に重ねる。

   横長写真(1.8:1)を縦画面いっぱいに敷くと幅の26%しか映らず
   後ろ姿のアップになって構図が壊れる（2回実測して不採用）。
   そこで高さを 56svh に抑え、幅の約50%が映るようにしている      */
@media (max-width:640px){
  .hero{
    display:block;
    align-items:initial;
    min-height:0;
    padding:0 0 clamp(28px,7vw,44px);
    background:var(--white);
  }

  /* 写真。画面の半分以上を占める */
  .hero__bg{
    inset:0 0 auto 0;
    height:clamp(340px,56svh,460px);
    /* PC用の132%指定を打ち消す。縦画面では帯を埋める必要がある */
    background-size:cover;
    background-position:50% 32%;
  }
  /* 上はロゴが読めるよう白く起こし、下は白へ溶かす */
  .hero__wash{
    inset:0 0 auto 0;
    height:clamp(340px,56svh,460px);
    background:linear-gradient(to bottom,
      rgba(255,255,255,.93)  0%,
      rgba(255,255,255,.82) 20%,
      rgba(255,255,255,.34) 40%,
      rgba(255,255,255,.06) 58%,
      rgba(255,255,255,.45) 84%,
      var(--white)         100%);
  }
  .hero__wash::after{ display:none; }

  /* 文字は写真の下から始める */
  .hero__in{
    position:relative;
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    padding:calc(clamp(340px,56svh,460px) + clamp(14px,4vw,24px)) var(--pad) 0;
  }

  /* ロゴとテープは写真の上に重ねる */
  .hero__logo{
    position:absolute;
    top:clamp(30px,7vw,46px);
    left:var(--pad); right:var(--pad);
    width:auto;
    margin-left:-6.36%;
  }
  .hero__tape{
    position:absolute;
    top:calc(clamp(30px,7vw,46px) + 36vw);   /* ロゴの下端(約147px)と離す */
    left:var(--pad);
    margin-top:0;
    font-size:clamp(12.5px,3.6vw,15px);
    padding:8px 14px;
  }

  .hero__sub{ margin-top:0; font-size:clamp(12.5px,3.5vw,15px); }
  .hero__main{ margin-top:clamp(6px,2vw,10px); font-size:clamp(28px,8.6vw,42px); line-height:1.45; }
  .hero__cta{ margin-top:clamp(20px,5.4vw,28px); width:100%; }
  .hero__cta .btn{ width:100%; justify-content:center; }

  /* 帯は本文の下に流す。
     PCでは右端を画面外へ逃がすが、スマホでは全体を画面内に収める。
     はみ出すと筆の左端のかすれが切れて、左右が不揃いに見えるため。
     94%にしているのは、3.6度傾けたぶん横に約16px膨らむのを見込んだ値 */
  .hero__badge{
    position:relative;
    right:auto; bottom:auto;
    margin:clamp(18px,5vw,28px) auto 0;
    width:94%;
    transform:rotate(-3.6deg);
  }
  .hero__badge-t{
    right:32%;
    font-size:clamp(13px,3.9vw,17px);
  }

  .splat--l{ left:-16%; bottom:auto; top:calc(clamp(340px,56svh,460px) - 60px); width:clamp(110px,30vw,160px); }
  .splat--r{ display:none; }
}

/* ============================================================
   02 未経験者だけで始める理由
   「前夜 → 夜明け」を面の色で表す。
   黒（まだ何者でもない）→ 白（その瞬間）→ 紫（言い切る）
   使う色は4色だけ。写真は使わない
   ============================================================ */
.wrap{
  width:100%;
  max-width:1080px;
  margin-inline:auto;
  padding-inline:var(--pad);
}
.why{ position:relative; background:var(--white); }

/* ---------- 面の切り方（斜め） ---------- */
.why__dark{
  position:relative;
  background:var(--black);
  color:var(--white);
  padding-block:clamp(84px,15vw,170px) clamp(96px,17vw,200px);
  margin-top:clamp(-40px,-4vw,-16px);
  overflow:hidden;
  isolation:isolate;
}
.why__light{
  position:relative;
  z-index:1;
  /* 筆の帯を左右にはみ出させるので、ここで切る（横スクロール防止） */
  overflow:hidden;
  background:var(--white);
  padding-block:clamp(56px,9vw,104px);
}
.why__end{
  position:relative;
  background:var(--purple);
  color:var(--white);
  padding-block:clamp(80px,14vw,150px);
  overflow:hidden;
  isolation:isolate;
}

/* ---------- 面の境目（筆で払った縁） ----------
   定規の斜め線をやめ、brush.webp の輪郭を境目にする。

   仕組み：直線で区切った境目の上に「次の面の色で塗った筆」を重ね、
   前の面を削り取る。境目は筆の上側の輪郭になる。

   位置の根拠（実測）：brush.webp の絵柄は画像の高さの 29%〜69% にしかない。
   そのため帯の下端を境目より 0.45×高さ ぶん下げて、
   絵柄が境目をまたぐようにしている                              */
.edge{
  --h:clamp(150px,22vw,300px);
  position:absolute;
  left:-14%; right:-14%;
  bottom:calc(var(--h) * -0.45);
  height:var(--h);
  pointer-events:none;
  -webkit-mask:url(../assets/decoration/brush.webp) center / 100% 100% no-repeat;
          mask:url(../assets/decoration/brush.webp) center / 100% 100% no-repeat;
}
/* 黒 → 白。白い筆で黒を払う */
.edge--a{
  z-index:3;
  background:var(--white);
}
/* 白 → 紫。紫の筆が白へ食い込む。
   同じ画像なので、左右反転させて別の筆に見せる */
.edge--b{
  z-index:2;
  background:var(--purple);
  transform:scaleX(-1);
  --h:clamp(130px,18vw,250px);
}

/* ---------- 背景に置く大きな英字 ---------- */
.ghost{
  position:absolute; z-index:0;
  right:-6%; bottom:4%;
  transform:rotate(-6deg);
  font-size:clamp(80px,17vw,210px);
  font-weight:800;
  letter-spacing:.02em;
  line-height:1;
  color:transparent;
  -webkit-text-stroke:1.5px rgba(255,255,255,.075);
  pointer-events:none;
  white-space:nowrap;
}

/* ---------- 紫のインク飛沫 ---------- */
.why .splat{
  position:absolute; z-index:1;
  background:var(--purple);
  pointer-events:none;
}
.splat--w1{
  width:clamp(160px,24vw,320px); aspect-ratio:1;
  left:-5%; top:-6%;
  transform:rotate(28deg);
  opacity:.85;
  -webkit-mask:url(../assets/texture/ink-a.webp) center/contain no-repeat;
          mask:url(../assets/texture/ink-a.webp) center/contain no-repeat;
}
.splat--w2{
  width:clamp(120px,17vw,230px); aspect-ratio:1;
  right:8%; bottom:-4%;
  transform:rotate(-52deg);
  opacity:.6;
  -webkit-mask:url(../assets/texture/ink-b.webp) center/contain no-repeat;
          mask:url(../assets/texture/ink-b.webp) center/contain no-repeat;
}

/* ---------- 見出し ---------- */
.why .wrap{ position:relative; z-index:2; }
.eyebrow{
  display:inline-block;
  font-size:clamp(11px,2.7vw,13px);
  font-weight:700;
  letter-spacing:.3em;
  line-height:1;
  color:var(--purple);
  margin-bottom:clamp(16px,2.8vw,24px);
  padding-left:38px;
  position:relative;
}
.eyebrow::before{
  content:"";
  position:absolute; left:0; top:50%;
  width:26px; height:2px;
  background:var(--purple);
}
.sec-h{
  font-size:clamp(27px,7vw,58px);
  font-weight:800;
  line-height:1.32;
  letter-spacing:.01em;
  margin-bottom:clamp(28px,5vw,46px);
}
.br-sp{ display:none; }

/* ---------- 本文 ---------- */
.lead{ max-width:640px; }
.lead p{
  font-size:clamp(14.5px,3.7vw,17px);
  line-height:2.1;
  letter-spacing:.03em;
  color:rgba(255,255,255,.74);
  word-break:auto-phrase;
  text-wrap:pretty;
}
.lead p + p{ margin-top:1em; }
.lead--lg p{
  color:var(--black);
  font-size:clamp(16px,4.3vw,22px);
  font-weight:500;
  line-height:2.05;
  max-width:760px;
}
.lead--lg p + p{ margin-top:1.2em; }

/* ---------- 「初めて」の3行。この節の主役 ---------- */
.firsts{
  list-style:none;
  margin:clamp(46px,8vw,90px) 0 0;
  padding:0;
}
.firsts li{
  position:relative;
  display:flex;
  align-items:center;
  gap:clamp(14px,2.4vw,28px);
  padding-block:clamp(6px,1.2vw,12px);
}
.firsts li + li{ margin-top:clamp(6px,1.4vw,16px); }
/* 左から伸びる紫の線＝照明が当たる */
.firsts i{
  flex:0 0 auto;
  display:block;
  width:clamp(28px,6vw,84px);
  height:6px;
  background:var(--purple);
}
.firsts span{
  /* 「初めて誰かに応援してもらう。」が1行に収まる上限（実測で決定） */
  font-size:clamp(25px,5.9vw,58px);
  font-weight:800;
  line-height:1.25;
  letter-spacing:.005em;
}
.firsts em{ font-style:normal; color:var(--purple); }

/* ---------- 締め ---------- */
.endbrush{
  position:absolute; z-index:0;
  left:-16%; top:50%;
  width:112%;
  aspect-ratio:1.277 / 1;
  translate:0 -50%;
  background:var(--purple-deep);
  opacity:.55;
  transform:rotate(-4deg);
  -webkit-mask:url(../assets/decoration/brush.webp) center/100% 100% no-repeat;
          mask:url(../assets/decoration/brush.webp) center/100% 100% no-repeat;
  pointer-events:none;
}
.end-t{
  font-size:clamp(20px,5.4vw,42px);
  font-weight:800;
  line-height:1.75;
  letter-spacing:.01em;
}
.end-t b{
  position:relative;
  display:inline-block;
  background:var(--white);
  color:var(--purple);
  padding:.02em .18em .08em;
  transform:rotate(-1.4deg);
}

/* ---------- 動き ---------- */
.anim .r{
  opacity:0;
  transform:translateY(30px);
  transition:opacity .75s ease-out, transform .75s cubic-bezier(.2,.75,.3,1);
}
.anim .r.in{ opacity:1; transform:none; }

.anim .f{
  opacity:0;
  transform:translateY(52px);
  transition:opacity .7s ease-out, transform .7s cubic-bezier(.2,.75,.3,1);
  transition-delay:calc(var(--i) * .24s);
}
.anim .f.in{ opacity:1; transform:none; }
.anim .f i{
  transform:scaleX(0);
  transform-origin:left center;
  transition:transform .65s cubic-bezier(.2,.8,.25,1);
  transition-delay:calc(var(--i) * .24s + .18s);
}
.anim .f.in i{ transform:scaleX(1); }

@media (prefers-reduced-motion:reduce){
  .r,.f{ opacity:1 !important; transform:none !important; }
  .f i{ transform:none !important; }
}

/* ---------- スマホ ---------- */
@media (max-width:640px){
  .br-sp{ display:block; }
  .edge{ --h:clamp(110px,30vw,160px); left:-20%; right:-20%; }
  /* 横に線を並べると文字幅が足りず折り返すので、線を上に置く */
  .firsts li{ display:block; }
  .firsts i{ width:34px; height:5px; margin-bottom:8px; }
  .firsts span{ font-size:clamp(21px,6.1vw,30px); }
  .firsts li + li{ margin-top:20px; }
  .endbrush{ left:-30%; width:150%; }
}

/* ============================================================
   03 活動内容
   DESIGN-PATTERN.md の型に従う。
   指示書にあるのは7項目だけで、白の面・紫の面に置く文章が無い。
   埋め草を書き足さず、黒の面ひとつで構成している
   ============================================================ */
.act{
  position:relative;
  background:var(--white);
  /* 境目の筆を上へはみ出させるので、横だけ切る。
     overflow:hidden にすると上へのはみ出しまで消えてしまう */
  overflow-x:clip;
}
.act__dark{
  position:relative;
  background:var(--black);
  color:var(--white);
  padding-block:clamp(92px,15vw,180px) clamp(96px,17vw,200px);
  overflow:hidden;
  isolation:isolate;
}
/* 紫の面から黒へ。黒い筆が紫へ食い込む。
   上下を反転させて、筆の輪郭が「下から上へ」向くようにしている */
.edge--c{
  z-index:4;
  top:calc(var(--h) * -0.55);
  bottom:auto;
  background:var(--black);
  transform:scaleX(-1) scaleY(-1);
  --h:clamp(140px,20vw,270px);
}
.ghost--act{ right:-8%; bottom:6%; }

.splat--c1{
  width:clamp(140px,20vw,270px); aspect-ratio:1;
  right:-4%; top:-5%;
  transform:rotate(-14deg);
  opacity:.8;
  -webkit-mask:url(../assets/texture/ink-b.webp) center/contain no-repeat;
          mask:url(../assets/texture/ink-b.webp) center/contain no-repeat;
}

/* 7項目。出演リストのように積む */
.acts{
  list-style:none;
  margin:clamp(40px,7vw,72px) 0 0;
  padding:0;
}
@media (min-width:860px){
  .acts{
    display:grid;
    grid-template-columns:1fr 1fr;
    column-gap:clamp(40px,6vw,90px);
    row-gap:0;
  }
}
.acts li{
  display:flex;
  align-items:center;
  gap:clamp(14px,2.2vw,26px);
  padding-block:clamp(10px,1.6vw,18px);
  border-bottom:1px solid rgba(255,255,255,.16);
}
/* 紫の線のかわりに線画アイコンを置く（Lucide / ISC）。
   塗りつぶしではなく線で描かれており、色は currentColor で変えられる */
.acts .ico{
  flex:0 0 auto;
  width:clamp(26px,3.4vw,40px);
  height:auto;
  aspect-ratio:1;
  color:var(--purple);
  stroke-width:1.6;        /* 既定の2は太いので線を細くする */
}
/* 項目が7つあるので、間隔を型の0.24秒より詰める（全部出るまで約0.9秒） */
.anim .acts .f{ transition-delay:calc(var(--i) * .13s); }
.anim .acts .f .ico{ transition-delay:calc(var(--i) * .13s + .12s); }

.acts span{
  font-size:clamp(23px,4.6vw,46px);
  font-weight:800;
  line-height:1.35;
  letter-spacing:.01em;
}

@media (max-width:640px){
  .edge--c{ --h:clamp(100px,28vw,150px); }
  .acts li{ gap:12px; padding-block:11px; }
  .acts .ico{ width:24px; }
}

/* ---------- 活動内容：白の面と紫の面 ----------
   型どおりの3面に戻す。
   黒＝7項目 → 白＝費用の内訳 → 紫＝言い切り。
   文章は指示書のものだけを使い、書き足していない        */
.act__light{
  position:relative;
  z-index:1;
  overflow:hidden;
  background:var(--white);
  color:var(--black);
  /* 文章が1文だけになったので、余白を詰めて間延びを防ぐ */
  padding-block:clamp(52px,8vw,88px) clamp(56px,9vw,100px);
}
/* 黒地用の小見出しを白地でも使う */
.eyebrow--dark{ color:var(--purple); }
.eyebrow--dark::before{ background:var(--purple); }

.act__end{
  position:relative;
  background:var(--purple);
  color:var(--white);
  padding-block:clamp(76px,13vw,140px);
  overflow:hidden;
  isolation:isolate;
}
/* 文字を装飾より前に出す（.why と同じ扱い） */
.act .wrap{ position:relative; z-index:2; }

/* 黒 → 白。白い筆で黒を払う */
.edge--e{
  z-index:3;
  background:var(--white);
  transform:scaleX(-1);
  --h:clamp(140px,20vw,270px);
}

/* 白 → 紫。紫の筆が白へ食い込む。
   前の面と別の筆に見えるよう、反転させずに使う */
.edge--d{
  z-index:2;
  background:var(--purple);
  --h:clamp(120px,17vw,240px);
}

/* ============================================================
   04 コンセプト
   黒＝コアコピー／白＝コンセプト3行のうち2行／紫＝ブランド名で言い切る
   ============================================================ */
.con{
  position:relative;
  background:var(--white);
  overflow-x:clip;               /* 上へはみ出す筆を残しつつ、横だけ切る */
}
.con__dark{
  position:relative;
  background:var(--black);
  color:var(--white);
  padding-block:clamp(96px,16vw,190px) clamp(100px,17vw,200px);
  overflow:hidden;
  isolation:isolate;
}
.con__light{
  position:relative;
  z-index:1;
  overflow:hidden;
  background:var(--white);
  color:var(--black);
  padding-block:clamp(64px,11vw,120px) clamp(72px,12vw,132px);
}
.con__end{
  position:relative;
  background:var(--purple);
  color:var(--white);
  padding-block:clamp(88px,15vw,170px);
  overflow:hidden;
  isolation:isolate;
}
.con .wrap{ position:relative; z-index:2; }

/* 面の境目 */
.edge--f{                        /* 紫 → 黒（上へ食い込む） */
  z-index:4;
  top:calc(var(--h) * -0.55);
  bottom:auto;
  background:var(--black);
  transform:scaleY(-1);
  --h:clamp(140px,20vw,270px);
}
.edge--g{                        /* 黒 → 白 */
  z-index:3;
  background:var(--white);
  --h:clamp(140px,20vw,270px);
}
.edge--h{                        /* 白 → 紫 */
  z-index:2;
  background:var(--purple);
  transform:scaleX(-1);
  --h:clamp(120px,17vw,240px);
}

.ghost--con{ right:-7%; top:8%; bottom:auto; }
.splat--d1{
  width:clamp(150px,21vw,280px); aspect-ratio:1;
  left:-6%; bottom:-6%;
  transform:rotate(38deg);
  opacity:.75;
  -webkit-mask:url(../assets/texture/ink-a.webp) center/contain no-repeat;
          mask:url(../assets/texture/ink-a.webp) center/contain no-repeat;
}

/* コアコピー。この節の主役 */
.core{
  margin:0;
  /* 「『私なんか』って思っていた昨日を越えて、」が1行に収まる上限（実測） */
  font-size:clamp(22px,4.9vw,46px);
  font-weight:800;
  line-height:1.62;
  letter-spacing:.01em;
}
.core span{ display:block; }
.core span + span{ margin-top:.3em; }
.core em{ font-style:normal; color:var(--purple); }

/* ブランド名で締める。
   ここは文字ではなくロゴ画像を使う（CLAUDE.md のルール）。
   白版のSVGは無いので、黒版を型にして白を流し込んでいる */
.con__name{ margin:0; }
.logo-w{
  display:block;
  width:min(100%, 620px);
  aspect-ratio:1100 / 358;
  background:var(--white);
  -webkit-mask:url(../assets/logo/logo_black.svg) left center / contain no-repeat;
          mask:url(../assets/logo/logo_black.svg) left center / contain no-repeat;
  /* SVGの左に6.36%の余白があるため、その分だけ引いて本文の左端に揃える */
  margin-left:-6.36%;
}

@media (max-width:640px){
  .edge--f{ --h:clamp(100px,28vw,150px); }
  .edge--g{ --h:clamp(100px,28vw,150px); }
  .edge--h{ --h:clamp(90px,24vw,140px); }
  .core span + span{ margin-top:.42em; }
}

/* ---------- 05 SUPPORT：運営が負担するものの内訳 ---------- */
.costs{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  gap:clamp(8px,1.2vw,12px);
  max-width:640px;
}
@media (min-width:820px){
  .costs{ grid-template-columns:1fr 1fr; column-gap:clamp(24px,3vw,44px); max-width:760px; }
}
.costs li{
  position:relative;
  padding-left:26px;
  font-size:clamp(14.5px,3.7vw,17px);
  line-height:1.9;
  letter-spacing:.02em;
}
/* 紫のチェック（2本の線で描く） */
.costs li::before,
.costs li::after{
  content:"";
  position:absolute;
  background:var(--purple);
  transform-origin:left center;
}
.costs li::before{ left:3px; top:.78em; width:8px;  height:2.5px; transform:rotate(46deg); }
.costs li::after { left:8px; top:.84em; width:15px; height:2.5px; transform:rotate(-46deg); }

/* 自己負担は控えめな注釈にする。バッジのような強い見せ方はしない */
.note{
  margin-top:clamp(18px,2.8vw,26px);
  font-size:clamp(12px,3vw,13.5px);
  line-height:1.8;
  letter-spacing:.03em;
  color:rgba(17,16,16,.62);
}

/* ============================================================
   06 求める人物像
   ここまで黒→白→紫が2回続いたので、白1面にして流れに緩急をつける。
   指示書にあるのは6項目だけで、白・紫に置く文章が無いため
   埋め草を書き足していない
   ============================================================ */
.look{
  position:relative;
  background:var(--white);
  overflow-x:clip;
}
.look__in{
  position:relative;
  background:var(--white);
  color:var(--black);
  padding-block:clamp(92px,15vw,180px) clamp(88px,15vw,175px);
  overflow:hidden;
  isolation:isolate;
}
.look .wrap{ position:relative; z-index:2; }

/* 紫 → 白。白い筆が紫へ食い込む */
.edge--i{
  z-index:4;
  top:calc(var(--h) * -0.55);
  bottom:auto;
  background:var(--white);
  transform:scaleY(-1) scaleX(-1);
  --h:clamp(140px,20vw,270px);
}

/* 白地用の見出し */
.sec-h--dark{ color:var(--black); }
.ghost--look{
  right:-8%; bottom:-4%;
  color:transparent;
  /* 白地では輪郭が目立ちやすいので、黒地のときより薄くする */
  -webkit-text-stroke:1.5px rgba(17,17,17,.05);
  font-size:clamp(70px,14vw,180px);
}

/* 6項目。紫のチェックを付ける */
.looks{
  list-style:none;
  margin:clamp(34px,6vw,60px) 0 0;
  padding:0;
  display:grid;
  gap:clamp(14px,2.2vw,22px);
}
@media (min-width:880px){
  .looks{ grid-template-columns:1fr 1fr; column-gap:clamp(36px,5vw,72px); }
}
.looks li{
  position:relative;
  padding-left:clamp(30px,3.4vw,44px);
  /* 「応援してくれる人を大切にできる方」16文字が2列に収まる上限（実測） */
  font-size:clamp(17px,4.2vw,23px);
  font-weight:800;
  line-height:1.6;
  letter-spacing:.01em;
}
/* 手で書いたようなチェック（2本の線で描く） */
.looks li::before,
.looks li::after{
  content:"";
  position:absolute;
  background:var(--purple);
  transform-origin:left center;
}
.looks li::before{ left:4px;  top:.74em; width:11px; height:3px; transform:rotate(46deg); }
.looks li::after { left:11px; top:.80em; width:21px; height:3px; transform:rotate(-46deg); }

@media (max-width:640px){
  .edge--i{ --h:clamp(100px,28vw,150px); }
  .looks li{ padding-left:30px; }
  .looks li::before{ left:2px; width:9px;  height:2.5px; }
  .looks li::after { left:8px; width:18px; height:2.5px; }
}

/* ============================================================
   07 運営実績
   これは運営会社の実績。グループの実績ではない。
   導入文で主体を明示している（正本の指示）
   ============================================================ */
.rec{
  position:relative;
  background:var(--white);
  overflow-x:clip;
}
.rec__dark{
  position:relative;
  background:var(--black);
  color:var(--white);
  padding-block:clamp(92px,15vw,180px) clamp(96px,16vw,190px);
  overflow:hidden;
  isolation:isolate;
}
.rec .wrap{ position:relative; z-index:2; }

/* 白 → 黒 */
.edge--j{
  z-index:4;
  top:calc(var(--h) * -0.55);
  bottom:auto;
  background:var(--black);
  transform:scaleY(-1);
  --h:clamp(140px,20vw,270px);
}
.ghost--rec{ right:-7%; bottom:2%; }
.splat--r1{
  width:clamp(130px,18vw,240px); aspect-ratio:1;
  left:-5%; top:-4%;
  transform:rotate(-24deg);
  opacity:.7;
  -webkit-mask:url(../assets/texture/ink-b.webp) center/contain no-repeat;
          mask:url(../assets/texture/ink-b.webp) center/contain no-repeat;
}

/* 主体を明示する導入文 */
.rec__note{
  max-width:660px;
  margin-top:clamp(-14px,-1.4vw,-8px);
  margin-bottom:clamp(34px,5.5vw,58px);
  font-size:clamp(14px,3.6vw,17px);
  line-height:1.95;
  letter-spacing:.03em;
  color:rgba(255,255,255,.78);
}
.rec__note b{ color:var(--white); font-weight:800; }

/* 3つの列 */
.rec__cols{
  display:grid;
  gap:clamp(34px,5vw,54px);
}
@media (min-width:900px){
  .rec__cols{ grid-template-columns:1fr 1.15fr 1fr; gap:clamp(32px,4vw,56px); align-items:start; }
}
.rec__h{
  margin:0 0 14px;
  padding-bottom:11px;
  border-bottom:2px solid var(--purple);
  font-size:clamp(15px,3.8vw,18px);
  font-weight:800;
  letter-spacing:.08em;
}
.rec__list{ list-style:none; margin:0; padding:0; }
.rec__list li{
  padding-block:11px;
  border-bottom:1px solid rgba(255,255,255,.14);
  font-size:clamp(13.5px,3.5vw,15px);
  line-height:1.75;
  letter-spacing:.02em;
}
.rec__list li:last-child{ border-bottom:0; }
.rec__s{
  display:block;
  margin-top:3px;
  font-size:12px;
  line-height:1.7;
  letter-spacing:.03em;
  color:rgba(255,255,255,.58);
}

/* 受賞年。年と賞名を組にして並べる */
.rec__years{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  margin-top:10px;
}
.rec__years > span{
  display:inline-flex;
  align-items:baseline;
  gap:5px;
  border:1px solid rgba(255,255,255,.28);
  padding:4px 9px;
  font-size:12.5px;
  font-weight:700;
  letter-spacing:.02em;
  white-space:nowrap;
}
.rec__years i{
  font-style:normal;
  font-size:10.5px;
  font-weight:500;
  letter-spacing:.04em;
  color:var(--mis, #A855F7);
  color:#A98BF0;
}

@media (max-width:640px){
  .edge--j{ --h:clamp(100px,28vw,150px); }
  .rec__years > span{ font-size:12px; padding:4px 8px; }
}

/* ============================================================
   08 募集要項
   条件を伝える欄なので、装飾はせず罫線だけで読ませる。
   前の面（運営実績）が黒なので、ここは白1面にする
   ============================================================ */
.req{
  position:relative;
  background:var(--white);
  overflow-x:clip;
}
.req__in{
  position:relative;
  background:var(--white);
  color:var(--black);
  padding-block:clamp(92px,15vw,180px) clamp(88px,15vw,175px);
  overflow:hidden;
  isolation:isolate;
}
.req .wrap{ position:relative; z-index:2; }

/* 黒 → 白 */
.edge--k{
  z-index:4;
  top:calc(var(--h) * -0.55);
  bottom:auto;
  background:var(--white);
  transform:scaleY(-1) scaleX(-1);
  --h:clamp(140px,20vw,270px);
}
.ghost--req{
  right:-8%; bottom:-2%;
  color:transparent;
  -webkit-text-stroke:1.5px rgba(17,17,17,.05);
  font-size:clamp(62px,12vw,160px);
}

.reqs{
  margin:clamp(32px,5.5vw,54px) 0 0;
  max-width:880px;
  border-top:2px solid var(--black);
}
.reqs__row{
  display:grid;
  gap:4px;
  padding-block:clamp(16px,2.4vw,22px);
  border-bottom:1px solid var(--rule, #D6D2CC);
  border-bottom-color:rgba(17,17,17,.16);
}
@media (min-width:720px){
  .reqs__row{
    grid-template-columns:clamp(120px,14vw,170px) 1fr;
    gap:0 clamp(20px,3vw,40px);
    align-items:baseline;
  }
}
.reqs dt{
  font-size:clamp(12px,3vw,13.5px);
  font-weight:700;
  letter-spacing:.16em;
  line-height:1.9;
  color:var(--purple);
}
.reqs dd{
  margin:0;
  font-size:clamp(15px,3.9vw,19px);
  font-weight:500;
  line-height:1.85;
  letter-spacing:.02em;
}
.reqs dd b{ font-weight:800; }
.reqs__s{
  display:block;
  margin-top:2px;
  font-size:clamp(12.5px,3.2vw,14px);
  font-weight:400;
  line-height:1.8;
  color:rgba(17,16,16,.6);
}

/* ============================================================
   09 選考フロー
   ここは実際に順序があるので、連番(01/02/03)を使ってよい。
   応募締切と各選考の時期は未定のため、画面に出していない
   （空欄や「未定」を出すと応募をためらわせる。正本にTODOを記録）
   ============================================================ */
.flow{
  position:relative;
  background:var(--white);
  overflow-x:clip;
}
.flow__dark{
  position:relative;
  background:var(--black);
  color:var(--white);
  padding-block:clamp(92px,15vw,180px) clamp(96px,16vw,190px);
  overflow:hidden;
  isolation:isolate;
}
.flow__end{
  position:relative;
  background:var(--purple);
  color:var(--white);
  padding-block:clamp(80px,13vw,150px);
  overflow:hidden;
  isolation:isolate;
}
.flow .wrap{ position:relative; z-index:2; }

/* 白 → 黒 */
.edge--l{
  z-index:4;
  top:calc(var(--h) * -0.55);
  bottom:auto;
  background:var(--black);
  transform:scaleY(-1);
  --h:clamp(140px,20vw,270px);
}
/* 黒 → 紫 */
.edge--m{
  z-index:3;
  background:var(--purple);
  transform:scaleX(-1);
  --h:clamp(130px,18vw,250px);
}
.ghost--flow{ right:-5%; bottom:4%; }
.splat--f1{
  width:clamp(130px,18vw,240px); aspect-ratio:1;
  right:6%; top:-5%;
  transform:rotate(52deg);
  opacity:.7;
  -webkit-mask:url(../assets/texture/ink-a.webp) center/contain no-repeat;
          mask:url(../assets/texture/ink-a.webp) center/contain no-repeat;
}

/* 3段階 */
.steps{
  list-style:none;
  margin:clamp(36px,6vw,64px) 0 0;
  padding:0;
  display:grid;
  gap:clamp(18px,2.6vw,26px);
}
@media (min-width:900px){
  .steps{ grid-template-columns:repeat(3,1fr); gap:clamp(22px,2.6vw,34px); }
}
.steps li{
  display:flex;
  align-items:flex-start;
  gap:clamp(14px,2vw,20px);
  padding:clamp(20px,2.6vw,28px);
  border:1px solid rgba(255,255,255,.22);
}
.steps__n{
  flex:0 0 auto;
  font-size:clamp(26px,5.6vw,40px);
  font-weight:800;
  line-height:1;
  letter-spacing:.01em;
  color:var(--purple);
}
.steps__b{ display:block; }
.steps__t{
  display:block;
  font-size:clamp(17px,4.2vw,22px);
  font-weight:800;
  line-height:1.4;
  letter-spacing:.02em;
}
.steps__d{
  display:block;
  margin-top:7px;
  font-size:clamp(13px,3.4vw,14.5px);
  line-height:1.85;
  letter-spacing:.02em;
  color:rgba(255,255,255,.66);
}

/* デビュー予定。紫の面で言い切る */
.debut{
  margin:0;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:clamp(4px,0.8vw,8px);
}
.debut__l{
  font-size:clamp(11px,2.6vw,13px);
  font-weight:700;
  letter-spacing:.34em;
  line-height:1;
  color:rgba(255,255,255,.72);
}
.debut__d{
  font-size:clamp(46px,12vw,120px);
  font-weight:800;
  line-height:1.05;
  letter-spacing:.01em;
}
.debut__d b{ font-weight:800; }
.debut__s{
  margin-top:clamp(4px,1vw,10px);
  font-size:clamp(14px,3.6vw,19px);
  font-weight:700;
  letter-spacing:.1em;
}

@media (max-width:640px){
  .edge--l{ --h:clamp(100px,28vw,150px); }
  .steps li{ padding:18px; }
}

/* ============================================================
   10 最終CTA
   ページの最後。ここが一番強い行動の入口になる。
   前の面（デビュー予定）が紫なので、黒地にして紫のボタンを最も目立たせる
   ============================================================ */
.cta{
  position:relative;
  background:var(--black);
  overflow-x:clip;
}
.cta__dark{
  position:relative;
  background:var(--black);
  color:var(--white);
  padding-block:clamp(100px,16vw,190px) clamp(104px,17vw,200px);
  overflow:hidden;
  isolation:isolate;
}
.cta .wrap{ position:relative; z-index:2; }

/* 紫 → 黒 */
.edge--n{
  z-index:4;
  top:calc(var(--h) * -0.55);
  bottom:auto;
  background:var(--black);
  transform:scaleY(-1) scaleX(-1);
  --h:clamp(140px,20vw,270px);
}
.ghost--cta{ right:-6%; bottom:2%; }
.splat--c2{
  width:clamp(150px,21vw,280px); aspect-ratio:1;
  left:-6%; bottom:-8%;
  transform:rotate(-32deg);
  opacity:.72;
  -webkit-mask:url(../assets/texture/ink-b.webp) center/contain no-repeat;
          mask:url(../assets/texture/ink-b.webp) center/contain no-repeat;
}

.cta__copy{
  margin:0;
  font-size:clamp(28px,6.8vw,62px);
  font-weight:800;
  line-height:1.5;
  letter-spacing:.01em;
}
.cta__copy span{ display:block; }
.cta__copy em{ font-style:normal; color:var(--purple); }

.cta__btn{ margin-top:clamp(32px,5vw,52px); }
/* ページ最後のボタンは紫。ここが一番目立つ要素になる */
.btn--lg{
  background:var(--purple);
  min-height:clamp(58px,6vw,74px);
  padding:0 clamp(28px,3.4vw,48px);
  font-size:clamp(16px,2vw,21px);
  box-shadow:7px 7px 0 rgba(255,255,255,.9);
}
.btn--lg:hover,
.btn--lg:focus-visible{
  transform:translate(3px,3px);
  box-shadow:4px 4px 0 rgba(255,255,255,.9);
}
.btn--lg .btn__ic{ background:var(--white); }

.cta__note{
  margin-top:clamp(16px,2.4vw,22px);
  font-size:clamp(12.5px,3.2vw,14px);
  line-height:1.8;
  letter-spacing:.03em;
  color:rgba(255,255,255,.6);
}

@media (max-width:640px){
  .edge--n{ --h:clamp(100px,28vw,150px); }
  .cta__btn .btn{ width:100%; justify-content:center; }
}

/* ============================================================
   途中のCTA（PCのみ）と 固定バー（スマホのみ）
   ・PC …… 20% / 49% / 71% の3箇所に散らす
   ・スマホ … 画面下に固定。最終CTAまで来たら消す
   両方を同時に出すと押し付けがましくなるので、幅で出し分ける
   ============================================================ */

/* ---------- 途中のCTA（PCのみ） ---------- */
.cta-mid{
  margin-top:clamp(26px,3.4vw,40px);
}
.btn--mid{
  min-height:clamp(48px,4.4vw,56px);
  padding:0 clamp(22px,2.4vw,32px);
  font-size:clamp(14px,1.5vw,16px);
}
/* 紫の面に置くとき（白いボタン） */
.cta-mid--light .btn--mid{
  background:var(--white);
  color:var(--purple);
  box-shadow:6px 6px 0 rgba(255,255,255,.34);
}
.cta-mid--light .btn--mid .btn__ic{ background:var(--purple); }
.cta-mid--light .btn--mid:hover,
.cta-mid--light .btn--mid:focus-visible{
  transform:translate(3px,3px);
  box-shadow:3px 3px 0 rgba(255,255,255,.34);
}
/* 白い面に置くとき（黒いボタン） */
.cta-mid--dark .btn--mid{
  background:var(--black);
  color:var(--white);
  box-shadow:6px 6px 0 var(--purple);
}
.cta-mid--dark .btn--mid:hover,
.cta-mid--dark .btn--mid:focus-visible{
  transform:translate(3px,3px);
  box-shadow:3px 3px 0 var(--purple);
}

/* ---------- 固定バー（スマホのみ） ---------- */
.fixbar{ display:none; }

@media (max-width:640px){
  /* PC用の途中CTAは出さない */
  .cta-mid{ display:none; }

  .fixbar{
    display:block;
    position:fixed;
    left:0; right:0; bottom:0;
    z-index:80;
    padding:9px 14px calc(9px + env(safe-area-inset-bottom, 0px));
    background:rgba(17,17,17,.92);
    backdrop-filter:blur(6px);
    -webkit-backdrop-filter:blur(6px);
    border-top:1px solid rgba(255,255,255,.16);
    transform:translateY(110%);
    transition:transform .3s cubic-bezier(.2,.7,.3,1);
  }
  .fixbar.is-on{ transform:translateY(0); }

  .btn--fix{
    width:100%;
    justify-content:center;
    min-height:50px;
    padding:0 20px;
    background:var(--purple);
    color:var(--white);
    font-size:15px;
    letter-spacing:.06em;
    box-shadow:none;
  }
  .btn--fix:hover,
  .btn--fix:focus-visible{ transform:none; box-shadow:none; }
  .btn--fix .btn__ic{ width:22px; height:22px; background:var(--white); }

  /* バーの下に本文が隠れないよう、ページ末尾に余白を作る */
  body{ padding-bottom:calc(70px + env(safe-area-inset-bottom, 0px)); }
}

@media (prefers-reduced-motion:reduce){
  .fixbar{ transition:none; }
}

/* ============================================================
   フッター
   特定商取引法に基づく表記は載せない（商品販売がないため）
   ============================================================ */
.foot{
  background:var(--black);
  color:var(--white);
  padding-block:clamp(48px,7vw,80px) clamp(40px,6vw,64px);
  border-top:1px solid rgba(255,255,255,.14);
}
.foot__in{ display:block; }
.foot__logo{ margin:0 0 clamp(26px,4vw,38px); }
.foot__logo .logo-w{ width:min(58%, 220px); }

/* 会社情報と問い合わせ先。
   横に並べると住所が3行に折り返して読みにくいので、
   PCでは住所だけ折り返さないようにする */
.foot__nav{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-wrap:wrap;
  gap:clamp(10px,1.6vw,14px) clamp(16px,2.6vw,34px);
  font-size:clamp(12.5px,3.2vw,14px);
  line-height:1.9;
  letter-spacing:.03em;
}
@media (min-width:820px){
  .foot__nav li{ white-space:nowrap; }
}
.foot__k{
  display:inline-block;
  margin-right:9px;
  font-size:11px;
  letter-spacing:.14em;
  color:var(--purple);
}
.foot__nav a{
  color:rgba(255,255,255,.82);
  text-decoration:none;
  border-bottom:1px solid rgba(255,255,255,.3);
  padding-bottom:2px;
  transition:color .2s ease, border-color .2s ease;
}
.foot__nav a:hover,
.foot__nav a:focus-visible{
  color:var(--white);
  border-bottom-color:var(--white);
}
.foot__c{
  margin-top:clamp(26px,4vw,40px);
  font-size:11.5px;
  letter-spacing:.14em;
  color:rgba(255,255,255,.45);
}

@media (max-width:640px){
  .foot__nav{ flex-direction:column; gap:12px; }
  /* 固定バーと重ならないよう、フッターにも余白を足す */
  .foot{ padding-bottom:clamp(30px,7vw,44px); }
}