@charset "UTF-8";

/* =========================================================
   MEETUS - 学生演劇フェスティバル
   style.css

   参考サイト（neuron-tokyo.jp）を計測し、その設計値に合わせている。
     配色   #4925FF（ブランド）／#21211F（文字）／#F8F7F5（地）／#888882
     書体   Plus Jakarta Sans（欧文・数字）／Noto Sans JP（和文）
     ウェイト 700 主体
     型     全幅レイアウト、ピル型ボタン、円形バッジ、番号付きセクション
     文字   ルート font-size を vw 基準にした完全フルイド型
   ========================================================= */

:root{
  color-scheme: light;

  --brand:    #4925ff;
  --brand-dk: #3a1ddb;
  --ink:      #21211f;
  --paper:    #f8f7f5;
  --white:    #ffffff;
  --gray:     #888882;
  --rule:     #e3e1dd;

  --en: "Plus Jakarta Sans", "Helvetica Neue", Arial, sans-serif;
  --jp: "Noto Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN",
        "Yu Gothic", "YuGothic", Meiryo, system-ui, sans-serif;

  --pad: clamp(20px, 6.7vw, 96px);   /* 参考サイトの左右余白 96px @1440 */
  --gap: clamp(72px, 11vw, 160px);   /* セクション間 */
  --hd:  clamp(56px, 5vw, 72px);

  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
}

/* ルートを vw 基準にして、文字も余白も画面幅に追随させる */
html{
  font-size: clamp(14px, 1.08vw, 19px);
  -webkit-text-size-adjust:100%;
  /* scroll-behavior:smooth は指定しない。
     アンカー移動だけは main.js が明示的に滑らかにするため、
     それ以外のスクロールはブラウザ既定の即応に保つ。 */
}

*,*::before,*::after{ box-sizing:border-box; }
body,h1,h2,h3,p,ul,ol,li,dl,dt,dd,figure{ margin:0; padding:0; }
ul,ol{ list-style:none; }
img,video{ max-width:100%; height:auto; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
summary::-webkit-details-marker{ display:none; }

body{
  font-family:var(--jp);
  font-size:1rem; font-weight:400; line-height:2; letter-spacing:.01em;
  color:var(--ink); background:var(--white);
  overflow-x:hidden; font-feature-settings:"palt";
  -webkit-font-smoothing:antialiased;
}
body.is-locked{ overflow:hidden; }

.vh{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
.skip{ position:absolute; left:-9999px; top:0; z-index:400; padding:12px 20px; background:var(--brand); color:#fff; }
.skip:focus{ left:0; }
:focus-visible{ outline:2px solid var(--brand); outline-offset:3px; }
.note{ display:inline-block; font-size:.72rem; color:var(--gray); letter-spacing:.02em; }

/* =========================================================
   ピル型ボタン（参考サイトの主要部品）
   ========================================================= */
.pill{
  display:inline-flex; align-items:center; justify-content:center;
  padding:.85em 1.9em; border-radius:999px;
  font-family:var(--en); font-size:.82rem; font-weight:700; letter-spacing:.04em; line-height:1.5;
  border:1px solid var(--ink); color:var(--ink);
  transition:background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
  white-space:nowrap;
}
.pill--brand{ background:var(--brand); border-color:var(--brand); color:#fff; }
.pill--brand:hover{ background:var(--brand-dk); border-color:var(--brand-dk); }
.pill--white{ background:#fff; border-color:#fff; color:var(--brand); }
.pill--white:hover{ background:var(--ink); border-color:var(--ink); color:#fff; }
.pill--lg{ padding:1.15em 3.4em; font-size:1rem; }

/* =========================================================
   ローディング（暗転からの導入）
   ========================================================= */
.loader{
  position:fixed; inset:0; z-index:500;
  background:var(--ink); color:#fff;
  display:flex; align-items:center; justify-content:center;
}
.loader__word{ display:flex; gap:.06em; font-family:var(--en); font-weight:800; font-size:clamp(34px,6vw,74px); letter-spacing:.06em; line-height:1; }
.loader__word span{ opacity:0; transform:translateY(18px); }
.js .loader__word span{ animation:loadIn .62s var(--ease-out) calc(.07s * var(--i)) forwards; }
@keyframes loadIn{ to{ opacity:1; transform:none; } }

/* 幕引きは CSS で行う。main.js が読み込めなかった場合でも
   ローダーが出たままにならないようにするため。 */
.js .loader{ animation:loaderOut .78s var(--ease-out) 1.45s forwards; }
@keyframes loaderOut{ to{ transform:translateY(-100%); visibility:hidden; } }
html:not(.js) .loader{ display:none; }

/* =========================================================
   ヘッダー
   ========================================================= */
.hd{
  position:fixed; inset:0 0 auto 0; z-index:300;
  height:var(--hd); display:flex; align-items:center; gap:clamp(14px,2.4vw,36px);
  padding-inline:var(--pad);
  background:var(--white);
  transition:transform .45s var(--ease), box-shadow .35s var(--ease);
}
.hd.is-lifted{ box-shadow:0 1px 0 var(--rule); }
.hd.is-hidden{ transform:translateY(-100%); }
.hd__logo{ font-family:var(--en); font-weight:800; font-size:1.15rem; letter-spacing:.14em; line-height:1; }
.hd__nav{ display:flex; gap:clamp(12px,1.8vw,28px); margin-left:clamp(10px,3vw,56px); }
.hd__nav a{
  font-family:var(--en); font-size:.78rem; font-weight:700; letter-spacing:.02em;
  transition:color .25s var(--ease);
}
.hd__nav a:hover{ color:var(--brand); }
.hd__cta{ margin-left:auto; }

.hd__burger{ display:none; margin-left:auto; width:26px; height:26px; align-items:center; }
.hd__burger > span[aria-hidden]{ display:block; width:24px; height:9px; position:relative; }
.hd__burger i{ position:absolute; left:0; width:100%; height:2px; background:var(--ink); transition:transform .35s var(--ease); }
.hd__burger i:nth-child(1){ top:0; }
.hd__burger i:nth-child(2){ bottom:0; }
.hd__burger[aria-expanded="true"] i:nth-child(1){ transform:translateY(3.5px) rotate(20deg); }
.hd__burger[aria-expanded="true"] i:nth-child(2){ transform:translateY(-3.5px) rotate(-20deg); }

/* =========================================================
   ドロワー
   ========================================================= */
.drawer{
  position:fixed; inset:0; z-index:290; background:var(--ink); color:#fff;
  display:flex; align-items:center; padding:var(--hd) var(--pad) 40px;
  opacity:0; visibility:hidden; transition:opacity .35s var(--ease), visibility .35s;
}
.drawer[hidden]{ display:none; }
.drawer.is-open{ opacity:1; visibility:visible; }
.drawer__nav{ width:100%; display:grid; }
.drawer__nav a{
  display:flex; align-items:baseline; gap:16px; padding:.7em 0;
  border-bottom:1px solid rgba(255,255,255,.16);
  opacity:0; transform:translateY(10px); transition:color .25s var(--ease);
}
.drawer.is-open .drawer__nav a{
  opacity:1; transform:none;
  transition:opacity .45s var(--ease) calc(.05s*var(--d)), transform .45s var(--ease) calc(.05s*var(--d)), color .25s var(--ease);
}
.drawer__nav a:hover{ color:var(--brand); }
.drawer__nav em{ font-family:var(--en); font-style:normal; font-weight:800; font-size:clamp(22px,4.4vw,40px); line-height:1.2; }
.drawer__nav span{ font-size:.74rem; color:rgba(255,255,255,.6); }

/* =========================================================
   ヒーロー
   ========================================================= */
.hero{ padding-top:var(--hd); }

.hero__meta{
  padding:clamp(28px,4.5vw,56px) var(--pad) clamp(20px,3vw,34px);
  display:flex; align-items:baseline; gap:clamp(16px,4vw,64px); flex-wrap:wrap;
}
.hero__date{ font-family:var(--en); font-weight:700; font-size:.92rem; letter-spacing:.03em; line-height:1.6; }
.hero__date span{ font-weight:500; color:var(--gray); }
.hero__tag{ font-size:.86rem; font-weight:500; line-height:1.6; }
.hero__place{ font-size:.86rem; font-weight:500; line-height:1.6; margin-left:auto; }

/* 全幅のワードマーク。文字を等間隔に配置して端から端まで使う */
.hero__word{
  display:flex; justify-content:space-between;
  padding-inline:var(--pad);
  font-family:var(--en); font-weight:800;
  font-size:clamp(58px,15.4vw,250px); line-height:.9; letter-spacing:-.01em;
}
.hero__word span{ display:block; }
/* 幕が引けたあと、1文字ずつ立ち上がる。こちらも CSS だけで完結させる。 */
.js .hero__word span{
  opacity:0; transform:translateY(.16em);
  animation:wordIn .85s var(--ease-out) calc(1.6s + .055s * var(--i)) forwards;
}
@keyframes wordIn{ to{ opacity:1; transform:none; } }

/* 映像・写真の帯。素材が入るまでは無地で成立させる */
.band{ position:relative; margin-top:clamp(18px,2.6vw,34px); overflow:hidden; }
.band__media{
  position:absolute; inset:0;
  background:var(--ink);
  background-image:
    radial-gradient(ellipse 60% 70% at 30% 0%, rgba(73,37,255,.55), transparent 60%),
    radial-gradient(ellipse 50% 60% at 85% 100%, rgba(73,37,255,.3), transparent 62%);
}
.band__copy{
  position:relative; z-index:1; color:#fff;
  padding:clamp(56px,11vw,150px) var(--pad) clamp(40px,7vw,96px);
}
.band__lead{ font-size:clamp(26px,4.6vw,68px); font-weight:700; line-height:1.45; letter-spacing:.01em; }
.band__sub{ margin-top:1em; font-size:.92rem; font-weight:500; line-height:2; color:rgba(255,255,255,.8); max-width:34em; }
.sp-br{ display:none; }

.scroll-hint{ padding:clamp(16px,2.4vw,28px) var(--pad) clamp(28px,4vw,48px); }
.scroll-hint span{ font-family:var(--en); font-size:.74rem; font-weight:700; letter-spacing:.14em; color:var(--gray); }
.scroll-hint span::after{ content:""; display:inline-block; width:34px; height:1px; background:var(--gray); margin-left:10px; vertical-align:middle; }
.js .scroll-hint span::after{ animation:hint 1.9s var(--ease) infinite; transform-origin:left; }
@keyframes hint{ 0%,100%{ transform:scaleX(.4); opacity:.5 } 50%{ transform:scaleX(1); opacity:1 } }

/* =========================================================
   セクション共通
   ========================================================= */
section[id]{ scroll-margin-top:var(--hd); }
.sec{ padding-block:var(--gap); }
.sec--paper{ background:var(--paper); }
.sec--brand{ background:var(--brand); color:#fff; }
.sec--contact{ background:var(--ink); color:#fff; padding-block:clamp(64px,9vw,120px); }

.sec__head{
  position:relative; padding-inline:var(--pad);
  margin-bottom:clamp(32px,5vw,64px);
  border-top:1px solid currentColor; padding-top:1.1em;
}
.sec--brand .sec__head{ border-top-color:rgba(255,255,255,.45); }
.sec__en{ font-family:var(--en); font-size:.9rem; font-weight:700; letter-spacing:.03em; line-height:1.4; }
.sec__jp{ margin-top:.2em; font-size:1.05rem; font-weight:500; letter-spacing:.04em; line-height:1.6; }
.sec__no{
  position:absolute; right:var(--pad); top:1.1em;
  font-family:var(--en); font-size:.9rem; font-weight:700; line-height:1.4; color:var(--gray);
}
.sec--brand .sec__no{ color:rgba(255,255,255,.7); }
.sec__body{ padding-inline:var(--pad); }
.sec__foot{ margin-top:clamp(24px,3vw,40px); font-size:.8rem; color:var(--gray); }

.big-copy{
  font-size:clamp(30px,6.2vw,92px); font-weight:700; line-height:1.35; letter-spacing:.005em;
  margin-bottom:clamp(32px,5vw,64px);
}
.big-copy--invert{ color:#fff; }

.sub-head{
  margin-top:clamp(48px,7vw,88px); margin-bottom:clamp(18px,2.4vw,30px);
  font-family:var(--en); font-size:.9rem; font-weight:700; letter-spacing:.03em;
}

/* =========================================================
   01 About
   ========================================================= */
.cols{ display:grid; grid-template-columns:1fr clamp(240px,26vw,340px); gap:clamp(28px,5vw,72px); align-items:start; }
.cols__main p{ max-width:36em; font-size:.94rem; line-height:2.15; }
.cols__main p + p{ margin-top:1.5em; }

.naming{ border:1px solid var(--rule); border-radius:18px; padding:clamp(20px,2.4vw,30px); }
.naming__head{ font-family:var(--en); font-size:.78rem; font-weight:700; color:var(--brand); line-height:1; margin-bottom:1em; }
.naming__list li{
  display:flex; align-items:baseline; gap:.5em;
  font-family:var(--en); font-weight:700; font-size:1.05rem; line-height:1.9;
}
.naming__list li + li{ border-top:1px solid var(--rule); }
.naming__list em{ font-style:normal; font-weight:800; color:var(--brand); }
.naming__list span{ margin-left:auto; font-family:var(--jp); font-size:.72rem; font-weight:400; color:var(--gray); }

/* =========================================================
   Parts（Pt.1 / Pt.2 / Pt.3）
   ========================================================= */
.parts{ padding:var(--gap) var(--pad); background:var(--ink); color:#fff; }
.parts__label{
  font-family:var(--en); font-size:clamp(22px,3.4vw,46px); font-weight:700; line-height:1.35;
  color:var(--brand); margin-bottom:clamp(32px,5vw,64px);
}
.parts__list{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(20px,3vw,44px); }
.part{ border-top:1px solid rgba(255,255,255,.3); padding-top:1.2em; }
.part__no{ font-family:var(--en); font-size:.8rem; font-weight:700; color:var(--brand); line-height:1.4; }
.part__title{ margin-top:.5em; font-family:var(--en); font-size:clamp(20px,2.4vw,32px); font-weight:800; line-height:1.2; }
.part__jp{ margin-top:.3em; font-size:.8rem; font-weight:500; color:rgba(255,255,255,.6); }
.part__text{ margin-top:1.1em; font-size:.86rem; line-height:2.05; color:rgba(255,255,255,.86); }

/* =========================================================
   02 Program
   ========================================================= */
.days{ display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(20px,3vw,40px); }
.day{ background:var(--white); border-radius:20px; padding:clamp(24px,3.2vw,44px); }
.day__no{ font-family:var(--en); font-size:.82rem; font-weight:700; color:var(--brand); line-height:1.4; }
.day__date{ margin-top:.2em; font-family:var(--en); font-size:clamp(26px,3.6vw,50px); font-weight:800; line-height:1.15; }
.day__date span{ font-size:.42em; font-weight:500; color:var(--gray); margin-left:.3em; }
.day__title{ margin-top:.6em; font-size:1rem; font-weight:700; line-height:1.7; }
.day__list{ margin-top:1.3em; border-top:1px solid var(--rule); }
.day__list li{ padding-block:.75em; border-bottom:1px solid var(--rule); font-size:.86rem; line-height:1.9; }
.day__list li span{ display:block; font-family:var(--en); font-size:.68rem; font-weight:700; letter-spacing:.06em; color:var(--brand); }
.day__open{ margin-top:1.4em; }
.day__open--closed{ background:transparent; border-color:var(--rule); color:var(--gray); }

/* =========================================================
   03 Outline
   ========================================================= */
.spec{ border-top:1px solid var(--rule); }
.spec > div{
  display:grid; grid-template-columns:clamp(110px,13vw,190px) 1fr; gap:clamp(14px,2vw,28px);
  padding-block:1.1em; border-bottom:1px solid var(--rule); align-items:baseline;
}
.spec dt{ font-family:var(--en); font-size:.78rem; font-weight:700; letter-spacing:.02em; color:var(--gray); }
.spec dd{ font-size:.94rem; font-weight:500; line-height:1.9; }
.spec dd .note{ display:block; }
.spec--invert{ border-top-color:rgba(255,255,255,.4); }
.spec--invert > div{ border-bottom-color:rgba(255,255,255,.4); }
.spec--invert dt{ color:rgba(255,255,255,.75); }
.spec--invert dd .note{ color:rgba(255,255,255,.7); }

.tt{ border-top:1px solid var(--rule); }
.tt li{
  display:grid; grid-template-columns:clamp(110px,13vw,190px) 1fr; gap:clamp(14px,2vw,28px);
  padding-block:1.2em; border-bottom:1px solid var(--rule); align-items:baseline;
}
.tt__when{ font-family:var(--en); font-size:.88rem; font-weight:700; color:var(--gray); }
.tt__what{ font-size:.86rem; line-height:1.95; color:var(--gray); }
.tt__what b{ display:block; font-size:1rem; font-weight:700; color:var(--ink); }
.tt li.is-main .tt__when{ color:var(--brand); }
.tt li.is-main .tt__what b{ color:var(--brand); }

/* =========================================================
   04 Entry
   ========================================================= */
.entry__lead{ max-width:34em; font-size:1rem; font-weight:500; line-height:2.05; margin-bottom:clamp(28px,4vw,52px); }
.cta{ margin-top:clamp(32px,4.5vw,60px); display:flex; align-items:center; gap:clamp(16px,2.4vw,32px); flex-wrap:wrap; }
.cta__mail{ font-family:var(--en); font-size:1rem; font-weight:700; letter-spacing:.02em; }

/* =========================================================
   05 FAQ
   ========================================================= */
.faq{ border-top:1px solid var(--rule); }
.faq li{ border-bottom:1px solid var(--rule); }
.faq summary{
  display:flex; gap:.7em; align-items:baseline; cursor:pointer;
  padding-block:1.15em; font-size:.96rem; font-weight:700; line-height:1.8;
  list-style:none; position:relative; padding-right:2.4em;
}
.faq summary::after{
  content:""; position:absolute; right:.3em; top:1.85em;
  width:13px; height:1px; background:var(--ink);
  box-shadow:0 0 0 0 transparent;
}
.faq summary::before{
  content:""; position:absolute; right:calc(.3em + 6px); top:calc(1.85em - 6px);
  width:1px; height:13px; background:var(--ink);
  transition:transform .3s var(--ease), opacity .3s var(--ease);
}
.faq details[open] summary::before{ transform:rotate(90deg); opacity:0; }
.faq__q{ font-family:var(--en); font-weight:800; color:var(--brand); }
.faq__a{ font-family:var(--en); font-weight:800; color:var(--gray); margin-right:.7em; }
.faq details p{ padding:0 2.4em 1.5em 0; font-size:.88rem; line-height:2.05; color:var(--gray); }

/* =========================================================
   Contact
   ========================================================= */
.contact__en{ font-family:var(--en); font-size:.9rem; font-weight:700; color:var(--brand); }
.contact__mail{ margin-top:.4em; }
.contact__mail a{
  font-family:var(--en); font-weight:800; letter-spacing:.01em; line-height:1.2;
  font-size:clamp(24px,5vw,72px); overflow-wrap:anywhere;
  background-image:linear-gradient(var(--brand),var(--brand));
  background-size:0% 2px; background-position:0 100%; background-repeat:no-repeat;
  transition:background-size .4s var(--ease), color .3s var(--ease);
}
.contact__mail a:hover{ color:var(--brand); background-size:100% 2px; }
.contact__note{ margin-top:1.4em; font-size:.86rem; color:rgba(255,255,255,.7); }

.org{ margin-top:clamp(40px,6vw,72px); border-top:1px solid rgba(255,255,255,.22); max-width:44em; }
.org > div{ display:grid; grid-template-columns:clamp(90px,10vw,140px) 1fr; gap:16px; padding-block:.85em; border-bottom:1px solid rgba(255,255,255,.22); align-items:baseline; }
.org dt{ font-family:var(--en); font-size:.76rem; font-weight:700; color:rgba(255,255,255,.6); }
.org dd{ font-size:.88rem; }
.org dd .note{ color:rgba(255,255,255,.55); margin-left:.5em; }

.staff{ margin-top:1.8em; max-width:44em; }
.staff summary{ cursor:pointer; font-family:var(--en); font-size:.8rem; font-weight:700; color:var(--brand); padding-block:.6em; list-style:none; }
.staff summary::before{ content:"+ "; }
.staff[open] summary::before{ content:"– "; }
.staff ul{ margin-top:.8em; border-top:1px solid rgba(255,255,255,.22); }
.staff li{ display:grid; grid-template-columns:clamp(90px,10vw,140px) 1fr; gap:16px; padding-block:.6em; border-bottom:1px solid rgba(255,255,255,.22); font-size:.84rem; align-items:baseline; }
.staff li span{ font-family:var(--en); font-size:.72rem; font-weight:700; color:rgba(255,255,255,.55); }

/* =========================================================
   フッター
   ========================================================= */
.ft{ background:var(--ink); color:#fff; padding:0 var(--pad) clamp(24px,3vw,40px); }
.ft__word{
  display:flex; justify-content:space-between;
  font-family:var(--en); font-weight:800; line-height:.9; letter-spacing:-.01em;
  font-size:clamp(58px,15.4vw,250px); color:rgba(255,255,255,.1);
}
.ft__row{ display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap; padding-top:clamp(20px,3vw,36px); border-top:1px solid rgba(255,255,255,.18); }
.ft__date{ font-size:.78rem; color:rgba(255,255,255,.6); }
.ft__copy{ font-family:var(--en); font-size:.74rem; font-weight:700; color:rgba(255,255,255,.45); }

/* =========================================================
   スクロール演出（.js が付いているときだけ隠す）
   ========================================================= */
.js [data-reveal]{
  opacity:0; transform:translateY(20px);
  transition:opacity .75s var(--ease-out), transform .75s var(--ease-out);
  transition-delay:calc(.07s * var(--d,0));
}
.js [data-reveal].is-in{ opacity:1; transform:none; }

/* =========================================================
   レスポンシブ
   ========================================================= */
@media (max-width: 900px){
  .hd__nav{ display:none; }
  .hd__cta{ display:none; }
  .hd__burger{ display:flex; }
  .cols{ grid-template-columns:1fr; }
  .parts__list{ grid-template-columns:1fr; gap:28px; }
  .days{ grid-template-columns:1fr; }
}

@media (max-width: 600px){
  body{ line-height:1.95; }
  .sp-br{ display:inline; }
  .hero__meta{ gap:6px 18px; }
  .hero__place{ margin-left:0; }
  .hero__word{ font-size:17vw; }
  .ft__word{ font-size:17vw; }
  .spec > div,.tt li,.org > div,.staff li{ grid-template-columns:1fr; gap:2px; padding-block:.9em; }
  .spec dt,.tt__when,.org dt,.staff li span{ font-size:.7rem; }
  .cta .pill{ width:100%; }
  .faq summary{ font-size:.92rem; }
}

/* =========================================================
   モーション配慮 / 印刷
   ========================================================= */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  .js [data-reveal]{ opacity:1; transform:none; }
  .js .hero__word span,.js .loader__word span{ opacity:1; transform:none; }
  .loader{ display:none; }
}

@media print{
  .hd,.drawer,.loader,.scroll-hint{ display:none !important; }
  [data-reveal]{ opacity:1 !important; transform:none !important; }
  .sec--brand,.sec--contact,.parts,.ft,.band__media{ background:#fff !important; color:#000 !important; }
  .staff[open] ul{ display:block; }
}

/* =========================================================
   モーション部品
   ---------------------------------------------------------
   参考サイト（neuron-tokyo.jp）で使われている手法に合わせる。
     ・左右から閉じるマスク幕
     ・clip-path による開きと、内側の scale 連動
     ・横流れのティッカー
     ・ボタンは地の clip-path ＋ 文字の上下ロール
   いずれも、ライブラリが読み込めなかった場合に内容が
   隠れたままにならないことを前提に書いている。
   ========================================================= */

/* ---- 帯は中央から左右に開く ---- */
.band{ position:relative; }

/* ---- clip-path で開く ---- */
.has-gsap [data-anim="clip"]{ will-change:clip-path; }

/* ---- 横流れのティッカー ---- */
.ticker{
  overflow:hidden; white-space:nowrap;
  border-block:1px solid var(--rule);
  padding-block:.9em; background:var(--white);
}
.ticker__track{ display:inline-flex; }
.ticker__track span{
  font-family:var(--en); font-size:.82rem; font-weight:700; letter-spacing:.08em;
  color:var(--ink); padding-right:1.5em;
}
/* GSAP が無い環境では CSS だけで流す */
html:not(.has-gsap) .js .ticker__track{ animation:tickerRun 26s linear infinite; }
@keyframes tickerRun{ from{ transform:translateX(0) } to{ transform:translateX(-50%) } }

/* ---- ボタン：地が開き、文字が入れ替わる ---- */
.pill{ position:relative; overflow:hidden; isolation:isolate; }
.pill__txt{ display:block; position:relative; overflow:hidden; }
.pill__txt i{
  display:block; font-style:normal;
  transition:transform .5s var(--ease-out);
}
.pill__txt i:last-child{ position:absolute; inset:0; transform:translateY(105%); }
.pill:hover .pill__txt i:first-child{ transform:translateY(-105%); }
.pill:hover .pill__txt i:last-child{ transform:translateY(0); }

/* 地の開き。clip-path を下から広げる */
.pill::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:var(--ink);
  clip-path:inset(100% 0 0 0);
  transition:clip-path .45s var(--ease-out);
}
.pill:hover::before{ clip-path:inset(0 0 0 0); }
.pill--brand::before{ background:var(--brand-dk); }
.pill--white::before{ background:var(--ink); }
.pill--white:hover{ color:#fff; }
.pill:hover{ color:#fff; }
.pill--brand:hover{ background:var(--brand); border-color:var(--brand); }

/* ---- スクロール連動が効いている間は CSS 側の出現を止める ---- */
.has-gsap [data-reveal]{ transition:none; }

@media (prefers-reduced-motion: reduce){
  .ticker__track{ animation:none !important; }
  .pill__txt i:last-child{ display:none; }
}

/* =========================================================
   行マスク送り
   ---------------------------------------------------------
   文字を overflow:hidden の行箱に入れ、下から立ち上げる。
   参考サイトの _text-line_wrap / _text-line と同じ考え方。
   JS が行を組めなかった場合はそのまま素の文字として出る。
   ========================================================= */
.ln{ display:block; overflow:hidden; }
.ln > i{ display:block; font-style:normal; will-change:transform; }
.has-gsap [data-lines]{ visibility:hidden; }
.has-gsap [data-lines].is-split{ visibility:visible; }

/* =========================================================
   ティッカー（大型化）
   ========================================================= */
.ticker{ padding-block:.55em; border-block:1px solid var(--rule); background:var(--white); }
.ticker__track span{
  font-size:clamp(22px,3.1vw,44px); font-weight:800; letter-spacing:-.01em;
  padding-right:.6em; color:var(--ink);
}
.ticker__track span::after{ content:""; }

/* =========================================================
   カーソル追従（細かい入力機器のみ）
   ========================================================= */
.cursor{ display:none; }
@media (hover:hover) and (pointer:fine){
  .has-gsap .cursor{
    display:block; position:fixed; left:0; top:0; z-index:450;
    width:34px; height:34px; margin:-17px 0 0 -17px; border-radius:50%;
    border:1px solid var(--brand); pointer-events:none;
    opacity:0; will-change:transform;
  }
  .has-gsap.is-pointing .cursor{ background:rgba(73,37,255,.12); }
}

/* =========================================================
   セクション番号
   ========================================================= */
.sec__no{ font-variant-numeric:tabular-nums; }

@media (prefers-reduced-motion: reduce){
  [data-lines]{ visibility:visible !important; }
  .ln > i{ transform:none !important; }
  .cursor{ display:none !important; }
}

/* Contact の見出し（h2 だが他セクションの sec__en と同じ見え方にする） */
h2.contact__en{ font-weight:700; line-height:1.4; margin:0; }