@charset "utf-8";

/* =========================================================
   REIGA — esports team official site
   ========================================================= */

:root{
  --bg:        #08080a;
  --bg-2:      #0e0e12;
  --bg-3:      #14141a;
  --line:      rgba(255,255,255,.10);
  --white:     #f4f4f6;
  --gray:      #9a9aa4;
  --pink:      #e8197d;
  --pink-lt:   #ff53a8;
  --pink-dk:   #a20f55;
  --font-en:   'Oswald', 'Arial Narrow', sans-serif;
  --font-ja:   'Noto Sans JP', 'Hiragino Kaku Gothic ProN', 'Yu Gothic', sans-serif;
  --header-h:  78px;
  --ease:      cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; scroll-padding-top:var(--header-h); -webkit-text-size-adjust:100%; }
body{
  margin:0; background:var(--bg); color:var(--white);
  font-family:var(--font-ja); font-size:15px; line-height:1.9;
  letter-spacing:.02em; overflow-x:hidden;
  -webkit-tap-highlight-color:rgba(232,25,125,.22);
}
body.is-locked{ overflow:hidden; }
img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; text-decoration:none; }
ul,ol,dl,dd{ margin:0; padding:0; list-style:none; }
h1,h2,h3,p,figure{ margin:0; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
::selection{ background:var(--pink); color:#fff; }

.container{ width:min(1180px, 88%); margin-inline:auto; }

/* ---------- Loader ---------- */
.loader{
  position:fixed; inset:0; z-index:200; background:var(--bg);
  display:grid; place-items:center; transition:opacity .6s var(--ease), visibility .6s;
}
.loader.is-hidden{ opacity:0; visibility:hidden; }
.loader__logo{ width:88px; margin-inline:auto; animation:pulse 1.4s ease-in-out infinite; }
.loader__bar{ width:180px; height:2px; margin:26px auto 0; background:rgba(255,255,255,.12); overflow:hidden; }
.loader__bar span{ display:block; height:100%; width:40%; background:var(--pink); animation:slide 1.1s var(--ease) infinite; }
@keyframes pulse{ 0%,100%{ opacity:1; transform:scale(1); } 50%{ opacity:.45; transform:scale(.94); } }
@keyframes slide{ 0%{ transform:translateX(-120%); } 100%{ transform:translateX(320%); } }

/* ---------- Header ---------- */
.header{
  position:fixed; inset:0 0 auto 0; z-index:100; height:var(--header-h);
  display:flex; align-items:center; justify-content:space-between;
  padding:0 clamp(18px,4vw,44px);
  transition:background .4s var(--ease), height .4s var(--ease), border-color .4s;
  border-bottom:1px solid transparent;
}
.header.is-scrolled{
  height:64px; background:rgba(8,8,10,.86); backdrop-filter:blur(14px);
  border-bottom-color:var(--line);
}
.header__logo{ display:flex; align-items:center; gap:12px; z-index:102; }
.header__logo img{ width:40px; transition:transform .4s var(--ease); }
.header__logo:hover img{ transform:rotate(-6deg) scale(1.06); }
.header__logo-text{
  font-family:var(--font-en); font-weight:700; font-size:24px; letter-spacing:.16em; line-height:1;
}

.gnav{ display:flex; align-items:center; gap:clamp(16px,2.4vw,34px); }
.gnav__list{ display:flex; align-items:center; gap:clamp(14px,2vw,30px); }
.gnav__link{
  font-family:var(--font-en); font-size:14px; letter-spacing:.14em; font-weight:500;
  position:relative; display:block; padding:6px 0; white-space:nowrap;
}
.gnav__link em{ display:none; }
.gnav__link::after{
  content:''; position:absolute; left:0; bottom:0; width:100%; height:2px; background:var(--pink);
  transform:scaleX(0); transform-origin:right; transition:transform .35s var(--ease);
}
.gnav__link:hover::after,.gnav__link.is-current::after{ transform:scaleX(1); transform-origin:left; }
.gnav__link.is-current{ color:var(--pink-lt); }

.gnav__sns{ display:flex; gap:12px; border-left:1px solid var(--line); padding-left:clamp(12px,1.6vw,22px); }
.sns-ico{ width:18px; color:var(--gray); transition:color .3s, transform .3s var(--ease); }
.sns-ico svg{ width:100%; height:auto; fill:currentColor; display:block; }
.sns-ico:hover{ color:var(--pink-lt); transform:translateY(-3px); }

.gnav__cta{
  font-family:var(--font-en); font-size:13px; letter-spacing:.14em; padding:11px 22px;
  background:var(--pink); color:#fff; clip-path:polygon(9px 0,100% 0,100% calc(100% - 9px),calc(100% - 9px) 100%,0 100%,0 9px);
  transition:background .3s, box-shadow .3s;
}
.gnav__cta:hover{ background:var(--pink-lt); box-shadow:0 0 24px rgba(232,25,125,.55); }

.hamburger{ display:none; width:38px; height:38px; position:relative; z-index:102; }
.hamburger span{
  position:absolute; left:7px; width:24px; height:2px; background:var(--white);
  transition:transform .4s var(--ease), opacity .3s;
}
.hamburger span:nth-child(1){ top:12px; }
.hamburger span:nth-child(2){ top:18px; }
.hamburger span:nth-child(3){ top:24px; }
.hamburger.is-open span:nth-child(1){ transform:translateY(6px) rotate(45deg); }
.hamburger.is-open span:nth-child(2){ opacity:0; }
.hamburger.is-open span:nth-child(3){ transform:translateY(-6px) rotate(-45deg); }

/* ---------- Hero ---------- */
.hero{
  position:relative; min-height:100svh; display:flex; flex-direction:column;
  justify-content:center; padding:var(--header-h) 0 90px; overflow:hidden;
}
.hero__bg{ position:absolute; inset:0; z-index:0; background:radial-gradient(120% 90% at 70% 20%, #1a0b16 0%, var(--bg) 60%); }
.rays{
  position:absolute; top:-40%; left:50%; width:170vmax; height:170vmax; transform:translateX(-50%);
  background:repeating-conic-gradient(from 0deg at 50% 50%,
    rgba(232,25,125,.14) 0deg 3deg, transparent 3deg 11deg);
  opacity:.55; animation:spin 90s linear infinite;
  -webkit-mask-image:radial-gradient(closest-side, #000 20%, transparent 72%);
          mask-image:radial-gradient(closest-side, #000 20%, transparent 72%);
}
@keyframes spin{ to{ transform:translateX(-50%) rotate(360deg); } }
.hero__grid{
  position:absolute; inset:0;
  background-image:linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
                   linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:linear-gradient(to bottom, transparent, #000 35%, #000 70%, transparent);
          mask-image:linear-gradient(to bottom, transparent, #000 35%, #000 70%, transparent);
}
.hero__watermark{
  position:absolute; right:2vw; bottom:-4vh; width:min(40vw, 470px);
  opacity:.16; filter:drop-shadow(0 0 60px rgba(232,25,125,.5));
  animation:float 9s ease-in-out infinite;
}
@keyframes float{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-22px); } }

.hero__slides{ position:relative; z-index:2; width:min(1180px,88%); margin-inline:auto; min-height:46vh; }
.hero__slide{
  position:absolute; inset:0; opacity:0; visibility:hidden;
  transform:translateY(26px); transition:opacity .35s var(--ease), transform .5s var(--ease), visibility .35s;
}
/* 先に前のスライドを消してから次を出す（巨大文字の重なりを防ぐ） */
.hero__slide.is-active{
  opacity:1; visibility:visible; transform:none; position:relative;
  transition:opacity .7s var(--ease) .35s, transform .8s var(--ease) .35s, visibility .7s .35s;
}
.hero__eyebrow{
  font-family:var(--font-en); letter-spacing:.34em; font-size:13px; color:var(--pink-lt);
  display:flex; align-items:center; gap:14px; margin-bottom:14px;
}
.hero__eyebrow::before{ content:''; width:46px; height:1px; background:var(--pink); }
.hero__title{
  font-family:var(--font-en); font-weight:700; line-height:.88;
  font-size:clamp(66px, 15vw, 190px); letter-spacing:.02em; margin-bottom:18px;
}
.hero__title span:first-child{ color:var(--white); }
.hero__title span:last-child{
  color:transparent; -webkit-text-stroke:2px var(--pink); text-stroke:2px var(--pink);
}
.hero__copy{
  font-size:clamp(19px,2.6vw,30px); font-weight:700; letter-spacing:.14em; margin-bottom:14px;
}
.hero__lead{ color:var(--gray); font-size:14px; line-height:2.1; }

.hero__controls{ position:absolute; z-index:3; left:6%; bottom:40px; display:flex; gap:10px; }
.hero__dot{ width:34px; height:3px; background:rgba(255,255,255,.24); transition:background .3s, transform .3s; }
.hero__dot.is-active{ background:var(--pink); transform:scaleY(1.8); }

.hero__scroll{
  position:absolute; z-index:3; right:6%; bottom:34px; display:flex; flex-direction:column;
  align-items:center; gap:10px; font-family:var(--font-en); font-size:11px; letter-spacing:.3em; color:var(--gray);
}
.hero__scroll i{ display:block; width:1px; height:56px; background:linear-gradient(var(--pink), transparent); position:relative; overflow:hidden; }
.hero__scroll i::after{ content:''; position:absolute; top:0; left:0; width:100%; height:22px; background:var(--pink-lt); animation:drop 1.8s var(--ease) infinite; }
@keyframes drop{ 0%{ transform:translateY(-100%); } 100%{ transform:translateY(300%); } }

/* ---------- 下層ページ共通のページヘッダ ---------- */
.page-hero{
  position:relative; overflow:hidden; background:var(--bg-2);
  border-bottom:1px solid var(--line);
  padding:calc(var(--header-h) + clamp(46px,6vw,84px)) 0 clamp(40px,5vw,64px);
}
.page-hero::before{
  content:''; position:absolute; inset:0;
  background:radial-gradient(90% 150% at 82% 0%, rgba(232,25,125,.18), transparent 62%);
}
/* 背景動画。素材が 1 本 7MB あるため、モバイルと省モーション設定では読み込まない
   （その場合は下の gradient がそのまま背景になる） */
.page-hero__video{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; opacity:.85; z-index:0;
}
/* 見出しが乗る左側だけしっかり暗く落とし、右側は素材を見せる */
.page-hero__veil{
  position:absolute; inset:0; z-index:0;
  background:
    linear-gradient(90deg, rgba(10,10,12,.92) 0%, rgba(10,10,12,.55) 40%, rgba(10,10,12,.05) 100%),
    linear-gradient(180deg, rgba(10,10,12,.3), rgba(10,10,12,.7));
}
.page-hero--video::before{ opacity:.5; }
.page-hero__grid{
  position:absolute; inset:0;
  background-image:linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
                   linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:linear-gradient(to bottom, #000, transparent);
          mask-image:linear-gradient(to bottom, #000, transparent);
}
.page-hero .container{ position:relative; z-index:1; }
.page-hero__en{
  font-family:var(--font-en); font-weight:700; font-size:clamp(38px,6.5vw,72px);
  line-height:1; letter-spacing:.04em; display:inline-block; position:relative; isolation:isolate;
}
.page-hero__en::after{
  content:''; position:absolute; left:0; bottom:6px; width:100%; height:10px;
  background:var(--pink); opacity:.28; z-index:-1;
}
.page-hero__ja{ font-size:13px; font-weight:700; letter-spacing:.3em; color:var(--pink-lt); margin-top:10px; }

/* ---------- HOME の動画バンド ---------- */
/* aspect-ratio と max-height を併用すると幅の方が縮むため、高さで指定する */
.video-band{
  position:relative; overflow:hidden; background:var(--bg-2);
  border-block:1px solid var(--line);
  width:100%; height:clamp(170px, 21vw, 320px);
}
.video-band__video{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  opacity:0; transition:opacity .8s var(--ease);
}
.video-band__video.is-playing{ opacity:1; }
.video-band__veil{
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(10,10,12,.55) 0%, transparent 30%, transparent 70%, rgba(10,10,12,.55) 100%);
}
/* 動画を読み込まない環境（モバイル・省モーション）ではバンド自体を出さない。
   読み込む場合は JS が先に is-enabled を付けてから src を入れる */
.video-band:not(.is-enabled){ display:none; }

/* ---------- Ticker ---------- */
.ticker{ overflow:hidden; border-block:1px solid var(--line); background:var(--bg-2); padding:14px 0; }
.ticker__track{ display:flex; width:max-content; animation:ticker 34s linear infinite; }
.ticker__track span{
  font-family:var(--font-en); font-size:22px; letter-spacing:.2em; color:rgba(255,255,255,.5);
  display:flex; align-items:center; white-space:nowrap; padding-right:0;
}
.ticker__track i{ display:inline-block; width:8px; height:8px; background:var(--pink); margin:0 24px; transform:rotate(45deg); }
@keyframes ticker{ to{ transform:translateX(-50%); } }

/* ---------- Section commons ---------- */
.section{ padding:clamp(80px,11vw,140px) 0; position:relative; }
.section--news{ background:var(--bg); }
.section--about{ background:var(--bg-2); overflow:hidden; }
.section--members{ background:var(--bg); }
/* SOCIAL 削除に伴い、隣り合うセクションが同色にならないよう入れ替え */
.section--partners{ background:var(--bg-2); }
.section--contact{ background:var(--bg); }

.sec-head{ margin-bottom:clamp(34px,5vw,58px); }
.sec-head--center{ text-align:center; }
.sec-head__en{
  font-family:var(--font-en); font-weight:700; font-size:clamp(40px,7vw,80px); line-height:1;
  letter-spacing:.04em; color:var(--white); position:relative; display:inline-block;
  isolation:isolate; /* 下線ハイライト(::after z-index:-1)を section 背景より前面に保つ */
}
.sec-head__en::after{
  content:''; position:absolute; left:0; bottom:6px; width:100%; height:10px;
  background:var(--pink); opacity:.28; z-index:-1;
}
.sec-head__ja{
  font-size:13px; font-weight:700; letter-spacing:.3em; color:var(--pink-lt); margin-top:8px;
}
.sec-more{ margin-top:44px; text-align:center; }

.btn{
  display:inline-block; font-family:var(--font-en); font-size:14px; letter-spacing:.18em;
  padding:16px 44px; background:var(--pink); color:#fff; text-align:center;
  clip-path:polygon(12px 0,100% 0,100% calc(100% - 12px),calc(100% - 12px) 100%,0 100%,0 12px);
  transition:background .3s, box-shadow .3s, transform .3s var(--ease);
}
.btn:hover{ background:var(--pink-lt); box-shadow:0 8px 30px rgba(232,25,125,.4); transform:translateY(-2px); }
.btn--ghost{ background:transparent; border:1px solid var(--pink); color:var(--pink-lt); }
.btn--ghost:hover{ background:var(--pink); color:#fff; }
.btn--full{ width:100%; border:0; cursor:pointer; }

/* ---------- Reveal ---------- */
[data-reveal]{ opacity:0; transform:translateY(28px); transition:opacity .8s var(--ease), transform .8s var(--ease); }
[data-reveal].is-in{ opacity:1; transform:none; }

/* ---------- News ---------- */
.news-filter{ display:flex; flex-wrap:wrap; gap:10px; margin-bottom:34px; }
.chip{
  font-family:var(--font-en); font-size:12px; letter-spacing:.14em; padding:8px 20px;
  border:1px solid var(--line); color:var(--gray); transition:.3s;
}
.chip:hover{ border-color:var(--pink); color:var(--white); }
.chip.is-active{ background:var(--pink); border-color:var(--pink); color:#fff; }

.news-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(290px,1fr)); gap:28px; }
.news-card{ display:block; transition:transform .4s var(--ease); }
.news-card.is-hidden{ display:none; }
.news-card:hover{ transform:translateY(-6px); }
.news-card__thumb{
  position:relative; aspect-ratio:16/9; overflow:hidden; background:
    linear-gradient(135deg, #17171d 0%, #241220 60%, #3a0d27 100%);
  display:grid; place-items:center; border:1px solid var(--line);
}
.news-card__thumb::after{
  content:''; position:absolute; inset:0; background:linear-gradient(120deg, transparent 40%, rgba(232,25,125,.35) 50%, transparent 60%);
  transform:translateX(-100%); transition:transform .7s var(--ease);
}
.news-card:hover .news-card__thumb::after{ transform:translateX(100%); }
.news-card__ph{
  font-family:var(--font-en); font-size:26px; letter-spacing:.24em; color:rgba(255,255,255,.22);
}
.news-card__body{ padding-top:16px; }
.news-card__meta{ display:flex; align-items:center; gap:12px; margin-bottom:8px; }
.news-card__meta time{ font-family:var(--font-en); font-size:13px; letter-spacing:.1em; color:var(--gray); }
.tag{ font-family:var(--font-en); font-size:10px; letter-spacing:.14em; padding:3px 10px; border:1px solid currentColor; }
.tag--team{ color:var(--pink-lt); }
.tag--result{ color:#ffd34d; }
.tag--event{ color:#5ad2ff; }
.tag--goods{ color:#8affa9; }
.news-card__title{ font-size:15px; font-weight:700; line-height:1.7; transition:color .3s; }
.news-card:hover .news-card__title{ color:var(--pink-lt); }

/* ---------- News: 単独記事の大きめカード ---------- */
.news-feature{
  display:grid; grid-template-columns:1.15fr 1fr; gap:clamp(22px,3.4vw,44px);
  align-items:center; border:1px solid var(--line); background:var(--bg-2);
  transition:border-color .4s, transform .4s var(--ease);
}
.news-feature:hover{ border-color:var(--pink); transform:translateY(-4px); }
/* 一覧では縦に積むので、間隔をカード側に持たせる */
.news-feature + .news-feature{ margin-top:clamp(24px,3vw,40px); }
.news-feature__thumb{ overflow:hidden; aspect-ratio:16/9; }
.news-feature__thumb img{
  width:100%; height:100%; object-fit:cover; display:block;
  transition:transform .9s var(--ease);
}
.news-feature:hover .news-feature__thumb img{ transform:scale(1.04); }
.news-feature__body{ padding:clamp(22px,3vw,36px) clamp(24px,3vw,40px) clamp(22px,3vw,36px) 0; }
.news-feature__title{
  font-size:clamp(22px,3vw,30px); font-weight:900; letter-spacing:.08em;
  margin:14px 0 16px; transition:color .3s;
}
.news-feature:hover .news-feature__title{ color:var(--pink-lt); }
.news-feature__excerpt{ color:#c9c9d1; font-size:14.5px; line-height:2.05; }
.news-feature__more{
  display:inline-block; font-family:var(--font-en); font-size:12px; letter-spacing:.22em;
  color:var(--pink-lt); margin-top:24px; padding-bottom:4px; border-bottom:1px solid currentColor;
}

/* ---------- News 記事ページ ---------- */
.section--article{ background:var(--bg); }
.article{ max-width:860px; margin-inline:auto; }
.article__meta{ display:flex; align-items:center; gap:14px; margin-bottom:16px; }
.article__meta time{ font-family:var(--font-en); font-size:14px; letter-spacing:.1em; color:var(--gray); }
.article__title{ font-size:clamp(28px,4.6vw,46px); font-weight:900; letter-spacing:.08em; line-height:1.4; }
.article__figure{ margin:34px 0 46px; border:1px solid var(--line); }
.article__figure img{ width:100%; height:auto; display:block; }
.article__body p{ font-size:15.5px; line-height:2.35; color:#d5d5dd; margin-bottom:34px; }
.article__body .article__lead{
  font-size:clamp(19px,2.6vw,26px); font-weight:700; color:var(--white); letter-spacing:.08em;
}
.article__body .article__en{
  font-family:var(--font-en); font-size:clamp(16px,2.2vw,22px);
  letter-spacing:.16em; color:var(--pink-lt);
}
.article__body .article__close{ font-weight:700; color:var(--white); }
.article__body .article__notice{
  font-family:var(--font-en); font-size:14px; letter-spacing:.12em; color:var(--white);
  border:1px solid var(--line); background:var(--bg-2); padding:22px 24px; text-align:center;
  margin-bottom:0;
}
.article__foot{ margin-top:56px; text-align:center; }

/* 記事内のロースター表。名前と SNS ID を並べる */
.article__h2{
  font-family:var(--font-en); font-size:clamp(20px,2.8vw,26px); letter-spacing:.16em;
  padding-bottom:12px; border-bottom:1px solid var(--line); margin-bottom:30px;
}
.roster__head{
  font-family:var(--font-en); font-size:13px; letter-spacing:.2em; color:var(--pink-lt);
  margin-bottom:14px;
}
.roster{ margin-bottom:34px; }
.roster li{
  display:flex; flex-wrap:wrap; align-items:baseline; gap:6px 16px;
  padding:13px 0; border-bottom:1px solid var(--line);
}
.roster__name{ font-family:var(--font-en); font-size:19px; letter-spacing:.08em; }
.roster__sns{ font-size:13.5px; color:var(--gray); transition:color .3s; }
.roster__sns:hover{ color:var(--pink-lt); }

/* ---------- About ---------- */
.about__mark{ position:absolute; left:-8%; top:50%; transform:translateY(-50%); width:min(46vw,520px); opacity:.05; pointer-events:none; }
.about__inner{ display:grid; grid-template-columns:1.25fr 1fr; gap:clamp(30px,5vw,70px); align-items:start; position:relative; z-index:1; }
/* HOME に置く抜粋版 */
.about__intro{ position:relative; z-index:1; max-width:720px; }
.about__intro p{ color:#c9c9d1; margin-bottom:26px; font-size:14.5px; }
.about__catch{
  font-size:clamp(28px,4.4vw,48px); font-weight:900; line-height:1.4; letter-spacing:.06em; margin-bottom:26px;
}
.about__catch::first-line{ color:var(--pink-lt); }
.about__text p{ color:#c9c9d1; margin-bottom:20px; font-size:14.5px; }
.about__text .btn{ margin-top:8px; }
.about__data{ border-top:1px solid var(--line); }
.about__data > div{ display:grid; grid-template-columns:130px 1fr; gap:16px; padding:16px 0; border-bottom:1px solid var(--line); }
.about__data dt{ font-family:var(--font-en); font-size:12px; letter-spacing:.14em; color:var(--pink-lt); padding-top:3px; }
.about__data dd{ font-size:14px; }

.stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line); margin-top:clamp(50px,7vw,80px); }
.stats__item{ background:var(--bg-2); padding:32px 18px; text-align:center; }
.stats__num{ font-family:var(--font-en); font-weight:700; font-size:clamp(38px,5vw,60px); line-height:1; color:var(--pink-lt); }
.stats__unit{ font-family:var(--font-en); font-size:18px; color:var(--pink); margin-left:4px; }
.stats__item p{ font-size:12px; letter-spacing:.1em; color:var(--gray); margin-top:10px; }

/* ---------- Members ---------- */
.tabs{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:38px; border-bottom:1px solid var(--line); }
.tab{
  font-family:var(--font-en); font-size:13px; letter-spacing:.14em; padding:12px 20px;
  color:var(--gray); position:relative; transition:color .3s;
}
.tab::after{ content:''; position:absolute; left:0; bottom:-1px; width:100%; height:2px; background:var(--pink); transform:scaleX(0); transition:transform .35s var(--ease); }
.tab:hover{ color:var(--white); }
.tab.is-active{ color:var(--white); }
.tab.is-active::after{ transform:scaleX(1); }

.member-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:24px; }
.member{ border:1px solid var(--line); background:var(--bg-2); transition:border-color .4s, transform .4s var(--ease); }
.member__link{ display:block; color:inherit; }
.member.is-hidden{ display:none; }
.member:hover{ border-color:var(--pink); transform:translateY(-6px); }
.member__visual{
  position:relative; aspect-ratio:3/4; display:grid; place-items:center; overflow:hidden;
  background:radial-gradient(90% 70% at 50% 20%, #2a0f22 0%, #101014 70%);
}
.member__visual::before{
  content:''; position:absolute; inset:auto 0 0 0; height:55%;
  background:linear-gradient(transparent, rgba(232,25,125,.22));
  opacity:0; transition:opacity .45s var(--ease);
}
.member:hover .member__visual::before{ opacity:1; }
.member__initial{
  font-family:var(--font-en); font-weight:700; font-size:120px; line-height:1;
  color:transparent; -webkit-text-stroke:1.5px rgba(255,255,255,.22);
  transition:transform .5s var(--ease), -webkit-text-stroke-color .4s;
}
.member:hover .member__initial{ transform:scale(1.12); -webkit-text-stroke-color:var(--pink-lt); }
/* 顔写真ありのカード。1:1 の素材でも 3:4 の枠に破綻なく収まる */
.member__photo{
  width:100%; height:100%; object-fit:cover; object-position:center 20%; display:block;
  transition:transform .6s var(--ease);
}
.member:hover .member__photo{ transform:scale(1.05); }
/* 背景透過の立ち絵。切り抜かずに全身を収め、カードのグラデーションの上に立たせる */
.member__art{
  width:100%; height:100%; min-width:0; min-height:0;
  object-fit:contain; object-position:center bottom; display:block;
  transition:transform .6s var(--ease);
}
.member:hover .member__art{ transform:scale(1.05); }
.member__crest{ position:absolute; right:10px; bottom:10px; width:36px; opacity:.5; }
.member__info{ padding:18px 16px 22px; }
.member__div{ font-family:var(--font-en); font-size:11px; letter-spacing:.16em; color:var(--pink-lt); margin-bottom:6px; }
.member__name{ font-family:var(--font-en); font-size:26px; letter-spacing:.06em; line-height:1.2; }
.member__real{ font-size:12px; color:var(--gray); margin-top:4px; }
.member__role{ font-family:var(--font-en); font-size:11px; letter-spacing:.14em; color:#c9c9d1; margin-top:10px; padding-top:10px; border-top:1px solid var(--line); }

/* 名前が未定のストリーマー枠 */
.member--tbd{ opacity:.5; }
.member--tbd:hover{ border-color:var(--line); transform:none; }
.member--tbd .member__name{ font-size:15px; letter-spacing:.22em; color:var(--gray); }
.member--tbd:hover .member__initial{ transform:none; -webkit-text-stroke-color:rgba(255,255,255,.22); }
.member-empty{ text-align:center; color:var(--gray); padding:40px 0; }

/* ---------- メンバー個別ページ ---------- */
.crumb{
  display:flex; align-items:center; gap:10px; margin-bottom:18px;
  font-family:var(--font-en); font-size:11.5px; letter-spacing:.18em; color:var(--gray);
}
.crumb a{ color:var(--pink-lt); border-bottom:1px solid currentColor; padding-bottom:2px; }

.mdetail__name{
  font-family:var(--font-en); font-weight:700; font-size:clamp(40px,7vw,84px);
  line-height:1; letter-spacing:.06em; margin-bottom:clamp(34px,5vw,56px);
}
.mdetail{
  display:grid; grid-template-columns:280px 1fr; gap:clamp(30px,5vw,64px);
  align-items:center; padding-bottom:clamp(50px,7vw,80px);
  border-bottom:1px solid var(--line);
}
/* 参考サイトに合わせた円形ポートレート */
.mdetail__photo{
  width:280px; height:280px; border-radius:50%; overflow:hidden;
  display:grid; place-items:center; border:1px solid var(--line);
  background:radial-gradient(90% 70% at 50% 20%, #2a0f22 0%, #101014 70%);
}
.mdetail__img{ width:100%; height:100%; object-fit:cover; object-position:center 20%; }
/* 背景透過の立ち絵は丸くくり抜かず、縦長の枠に全身を収める */
.mdetail__photo--art{ width:280px; height:400px; border-radius:3px; }
.mdetail__art{
  width:100%; height:100%; min-width:0; min-height:0;
  object-fit:contain; object-position:center bottom;
}
.mdetail__initial{
  font-family:var(--font-en); font-weight:700; font-size:110px; line-height:1;
  color:transparent; -webkit-text-stroke:1.5px rgba(255,255,255,.22);
}
.mdetail__data{ border-top:1px solid var(--line); max-width:520px; }
.mdetail__data > div{ display:grid; grid-template-columns:130px 1fr; gap:16px; padding:16px 0; border-bottom:1px solid var(--line); }
.mdetail__data dt{ font-family:var(--font-en); font-size:12px; letter-spacing:.14em; color:var(--pink-lt); padding-top:3px; }
.mdetail__data dd{ font-size:14.5px; }
.mdetail__sns{ display:flex; gap:18px; margin-top:26px; }
.mdetail__sns .sns-ico{ width:24px; }

.mdetail__teamhead{
  font-family:var(--font-en); font-weight:700; font-size:clamp(24px,3.4vw,34px);
  letter-spacing:.14em; margin:clamp(50px,7vw,80px) 0 30px;
  display:inline-block; background:var(--pink); color:#fff; padding:8px 26px;
  clip-path:polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px);
}
.team-strip{ display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:clamp(18px,2.4vw,30px); }
.team-strip__item{ display:block; text-align:center; }
.team-strip__thumb{
  display:grid; place-items:center; width:100%; aspect-ratio:1; border-radius:50%;
  overflow:hidden; border:1px solid var(--line); margin-bottom:14px;
  background:radial-gradient(90% 70% at 50% 20%, #2a0f22 0%, #101014 70%);
  transition:border-color .4s, transform .4s var(--ease);
}
.team-strip__item:hover .team-strip__thumb{ border-color:var(--pink); transform:translateY(-4px); }
.team-strip__img{ width:100%; height:100%; object-fit:cover; object-position:center 20%; }
.team-strip__initial{
  font-family:var(--font-en); font-weight:700; font-size:54px; line-height:1;
  color:transparent; -webkit-text-stroke:1.2px rgba(255,255,255,.22);
}
.team-strip__div{ display:block; font-family:var(--font-en); font-size:10px; letter-spacing:.18em; color:var(--pink-lt); }
.team-strip__name{ display:block; font-family:var(--font-en); font-size:17px; letter-spacing:.1em; margin-top:4px; transition:color .3s; }
.team-strip__item:hover .team-strip__name{ color:var(--pink-lt); }

/* ---------- YouTube ---------- */
.section--youtube{ background:var(--bg-2); }
.yt{ max-width:960px; margin-inline:auto; }
.yt__frame{
  position:relative; aspect-ratio:16/9; overflow:hidden;
  border:1px solid var(--line); background:#000;
}
.yt__frame iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }
.yt__grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:clamp(18px,2.4vw,28px); }

.partners__lead{
  text-align:center; color:var(--gray); font-size:15px; line-height:2;
  margin-bottom:clamp(30px,4vw,48px);
}

/* HOME のパートナー欄は直前の YOUTUBE が bg-2 のため地色を入れ替える */
.section--partners-home{ background:var(--bg); }

/* ---------- Partners ----------
   企業ロゴは濃色のものが多く、そのままダーク背景に置くと沈む。
   白タイルに載せてロゴ本来の色を保つ */
.partner-grid{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,250px));
  gap:clamp(20px,2.6vw,32px); justify-content:center;
}
.partner-tile{
  display:grid; place-items:center; aspect-ratio:16/8; padding:20px 24px;
  background:#fff; border-radius:3px;
  transition:transform .45s var(--ease), box-shadow .45s var(--ease);
}
/* グリッド項目の min-height:auto は中身の実寸を下限にするため、
   正方形ロゴを入れるとタイルの aspect-ratio が押し負けて正方形になる */
.partner-tile img{ width:100%; height:100%; min-width:0; min-height:0; object-fit:contain; }
/* 白抜きロゴの正方形アイコン素材は、タイルの地色をロゴの背景色に合わせると
   contain で余る左右がそのまま溶け込み、切り抜かずに収まる */
/* 正方形素材は上下に地色の余白を持つので、cover で切り詰めても
   ロゴ本体は欠けず、他社ロゴと同じ大きさで並ぶ */
.partner-tile--navy{ background:#112347; padding:0; }
.partner-tile--navy img{ object-fit:cover; }
.partner-item:hover .partner-tile{ transform:translateY(-5px); box-shadow:0 16px 34px rgba(0,0,0,.45); }
.partner-name{
  margin-top:14px; text-align:center; font-size:13px; line-height:1.6;
  letter-spacing:.05em; color:var(--gray);
}

/* ---------- Contact ---------- */
.contact__inner{ display:grid; grid-template-columns:1fr 1.15fr; gap:clamp(30px,5vw,64px); align-items:start; }
.contact__lead h3{ font-size:clamp(24px,3.4vw,34px); font-weight:900; letter-spacing:.06em; margin-bottom:20px; }
.contact__lead p{ color:#c9c9d1; font-size:14.5px; }
.contact__mail{ margin-top:22px; font-family:var(--font-en); letter-spacing:.1em; }
.contact__mail a{ color:var(--pink-lt); border-bottom:1px solid currentColor; }

.field{ margin-bottom:20px; }
.field label{ display:block; font-size:12.5px; letter-spacing:.1em; margin-bottom:8px; font-weight:700; }
.field label span{ font-size:10px; background:var(--pink); color:#fff; padding:2px 8px; margin-left:8px; letter-spacing:.08em; vertical-align:1px; }
.field input,.field select,.field textarea{
  width:100%; background:var(--bg-3); border:1px solid var(--line); color:var(--white);
  padding:13px 15px; font-family:var(--font-ja); font-size:14px; transition:border-color .3s, box-shadow .3s;
}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none; border-color:var(--pink); box-shadow:0 0 0 3px rgba(232,25,125,.18);
}
.field textarea{ resize:vertical; }
.field.is-error input,.field.is-error textarea{ border-color:#ff5470; }

/* プライバシーポリシー同意チェック */
.field--check label{
  display:flex; align-items:center; gap:12px; cursor:pointer;
  font-weight:400; margin-bottom:0; padding:6px 0;
}
.field--check input{
  width:20px; height:20px; flex:none; margin:0; padding:0;
  accent-color:var(--pink); background:var(--bg-3); cursor:pointer;
}
/* `.field label span` の「必須」バッジ指定を打ち消す（詳細度を1つ上げる） */
.field--check label .field__check-text{
  font-size:13.5px; letter-spacing:.04em;
  background:none; color:var(--white); padding:0; margin-left:0; vertical-align:baseline;
}
.field__check-text a{ color:var(--pink-lt); border-bottom:1px solid currentColor; }
.field--check.is-error .field__check-text{ color:#ff8095; }
/* プライバシーポリシー全文（フォーム内のスクロール枠） */
.policy{ margin:22px 0 24px; }
.policy__head{ font-size:12.5px; font-weight:700; letter-spacing:.1em; color:var(--gray); margin-bottom:10px; }
.policy__box{
  max-height:280px; overflow-y:auto; overscroll-behavior:contain;
  border:1px solid var(--line); background:var(--bg-3); padding:20px 22px;
}
.policy__box:focus-visible{ outline:1px solid var(--pink); outline-offset:2px; }
.policy__box h3{
  font-family:var(--font-en); font-size:13px; letter-spacing:.1em;
  color:var(--pink-lt); margin:24px 0 8px;
}
.policy__box > p:first-child{ margin-top:0; }
.policy__box p,.policy__box li{ font-size:13px; line-height:1.95; color:#c9c9d1; }
.policy__box p{ margin-bottom:12px; }
.policy__box ol{ list-style:decimal; padding-left:1.5em; margin-bottom:12px; }
.policy__box ol ol{ list-style:none; padding-left:1em; margin:8px 0 0; }
.policy__box ol ol > li::before{ content:'・'; margin-left:-1em; margin-right:.1em; color:var(--pink); }
.policy__box li{ margin-bottom:8px; }
.policy__contact{ border-top:1px solid var(--line); margin-top:6px; }
.policy__contact > div{ display:grid; grid-template-columns:72px 1fr; gap:12px; padding:10px 0; border-bottom:1px solid var(--line); }
.policy__contact dt{ font-size:12px; color:var(--pink-lt); }
.policy__contact dd{ font-size:13px; color:#c9c9d1; }
/* スクロールできることが分かるようにバーを出す */
.policy__box::-webkit-scrollbar{ width:8px; }
.policy__box::-webkit-scrollbar-track{ background:rgba(255,255,255,.05); }
.policy__box::-webkit-scrollbar-thumb{ background:rgba(232,25,125,.55); }
.policy__box::-webkit-scrollbar-thumb:hover{ background:var(--pink); }

/* Netlify Forms のハニーポット。人には見せず、DOM からは消さない */
.hp-field{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

.form-error{ color:#ff8095; font-size:13px; margin-bottom:14px; }
.form-done{ color:var(--pink-lt); font-size:13px; margin-top:14px; }

/* ---------- Legal（プライバシーポリシー等の下層ページ） ---------- */
.page-legal{ padding-top:var(--header-h); }
.section--legal{ background:var(--bg); }
.legal{ max-width:820px; }
.legal h2{
  font-size:clamp(19px,2.4vw,24px); font-weight:700; letter-spacing:.06em;
  padding-bottom:16px; margin-bottom:24px; border-bottom:1px solid var(--line);
}
.legal h3{
  font-family:var(--font-en); font-size:15px; letter-spacing:.12em; color:var(--pink-lt);
  margin:44px 0 14px;
}
.legal p{ color:#c9c9d1; font-size:14.5px; line-height:2.1; margin-bottom:16px; }
.legal ol{ list-style:decimal; padding-left:1.6em; margin-bottom:16px; }
.legal ol ol{ list-style:none; padding-left:1.2em; margin:10px 0 0; }
.legal ol ol > li::before{ content:'・'; margin-left:-1.2em; margin-right:.2em; color:var(--pink); }
.legal li{ color:#c9c9d1; font-size:14.5px; line-height:2.1; margin-bottom:10px; }
.legal__contact{ border-top:1px solid var(--line); margin-top:8px; }
.legal__contact > div{ display:grid; grid-template-columns:110px 1fr; gap:16px; padding:14px 0; border-bottom:1px solid var(--line); }
.legal__contact dt{ font-size:12.5px; letter-spacing:.12em; color:var(--pink-lt); }
.legal__contact dd{ font-size:14px; }

/* ---------- 送信完了ページ ---------- */
.thanks{ max-width:640px; margin-inline:auto; text-align:center; }
.thanks__mark{ width:72px; margin:0 auto 30px; }
.thanks__title{ font-size:clamp(20px,3vw,28px); font-weight:900; letter-spacing:.06em; margin-bottom:24px; }
.thanks__body{ color:#c9c9d1; font-size:14.5px; line-height:2.1; margin-bottom:40px; }
.thanks__body a{ color:var(--pink-lt); border-bottom:1px solid currentColor; }

/* ---------- Footer ---------- */
.footer{ background:#050506; border-top:1px solid var(--line); padding:60px 0 34px; }
.footer__inner{ display:grid; justify-items:center; gap:24px; text-align:center; }
.footer__logo{ width:64px; margin-inline:auto; }
.footer__tag{ font-family:var(--font-en); font-size:12px; letter-spacing:.28em; color:var(--gray); margin-top:12px; }
.footer__nav{ display:flex; flex-wrap:wrap; justify-content:center; gap:8px 24px; }
.footer__nav a{ font-family:var(--font-en); font-size:12px; letter-spacing:.14em; color:var(--gray); transition:color .3s; }
.footer__nav a:hover{ color:var(--pink-lt); }
.footer__sns{ display:flex; gap:18px; }
.footer__sns .sns-ico{ width:20px; }
.footer__copy{ font-family:var(--font-en); font-size:11px; letter-spacing:.14em; color:#5c5c66; }

/* ---------- To top ---------- */
.to-top{
  position:fixed; right:20px; bottom:20px; z-index:90; width:44px; height:44px;
  background:var(--pink); color:#fff; font-size:11px; opacity:0; visibility:hidden;
  transition:opacity .4s, visibility .4s, background .3s, transform .3s;
  clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px);
}
.to-top.is-show{ opacity:1; visibility:visible; }
.to-top:hover{ background:var(--pink-lt); transform:translateY(-3px); }

/* =========================================================
   Responsive
   ========================================================= */
@media (max-width:1080px){
  .gnav__list{ gap:16px; }
  .gnav__link{ font-size:13px; }
  .gnav__cta{ display:none; }
}

@media (max-width:900px){
  .mdetail{ grid-template-columns:1fr; justify-items:start; }
  .mdetail__photo{ width:min(240px,70vw); height:min(240px,70vw); }
  .mdetail__photo--art{ width:min(240px,70vw); height:min(343px,100vw); }
  .news-feature{ grid-template-columns:1fr; gap:0; }
  .news-feature__body{ padding:clamp(22px,4vw,30px); }
  .about__inner{ grid-template-columns:1fr; }
  .contact__inner{ grid-template-columns:1fr; }
  .stats{ grid-template-columns:repeat(2,1fr); }
}

@media (max-width:820px){
  .hamburger{ display:block; }
  /* backdrop-filter を持つ要素は position:fixed の子孫の基準ボックスになるため、
     .header に付けたままだと下の .gnav{inset:0} がヘッダーの高さに閉じ込められ、
     メニューが開いても帯状にしか表示されない。モバイルではぼかしを外し、
     代わりに背景を濃くして可読性を保つ */
  .header.is-scrolled{ backdrop-filter:none; background:rgba(8,8,10,.94); }
  .gnav{
    position:fixed; inset:0; z-index:101; background:rgba(8,8,10,.97);
    flex-direction:column; justify-content:flex-start; gap:24px;
    padding:calc(var(--header-h) + 16px) 20px calc(32px + env(safe-area-inset-bottom));
    overflow-y:auto; -webkit-overflow-scrolling:touch; overscroll-behavior:contain;
    opacity:0; visibility:hidden; transform:translateY(-12px);
    transition:opacity .45s var(--ease), visibility .45s, transform .45s var(--ease);
    backdrop-filter:blur(10px);
  }
  .gnav.is-open{ opacity:1; visibility:visible; transform:none; }
  /* 画面に収まる時は中央、あふれる時は上詰め＋スクロール。
     justify-content:center だと小型端末で上下が見切れて操作できなくなる */
  .gnav__list{ flex-direction:column; gap:18px; text-align:center; margin-top:auto; }
  .gnav__cta{ margin-bottom:auto; }
  .gnav__link{ font-size:26px; letter-spacing:.18em; }
  .gnav__link em{ display:block; font-style:normal; font-family:var(--font-ja); font-size:10.5px; letter-spacing:.24em; color:var(--gray); margin-top:2px; }
  .gnav__link::after{ display:none; }
  .gnav__sns{ border-left:0; padding-left:0; gap:22px; }
  .gnav__sns .sns-ico{ width:22px; }
  .gnav__cta{ display:inline-block; }
  .hero__controls{ left:6%; bottom:30px; }
  .hero__scroll{ display:none; }

  /* iOS Safari は 16px 未満の入力欄でフォーカス時に自動ズームする */
  .field input,.field select,.field textarea{ font-size:16px; }

  /* ノッチ・ホームバー回避 */
  .header{
    padding-left:max(18px, env(safe-area-inset-left));
    padding-right:max(18px, env(safe-area-inset-right));
  }
  .to-top{
    right:max(16px, env(safe-area-inset-right));
    bottom:max(16px, env(safe-area-inset-bottom));
  }
  .footer{ padding-bottom:calc(34px + env(safe-area-inset-bottom)); }

  /* タップ領域の確保（見た目の太さは変えず余白だけ広げる）。
     .is-active 側は background ショートハンドが background-clip を
     初期値に戻すため、ここで指定し直さないと余白まで塗られてしまう */
  .hero__dot{ height:23px; padding-block:10px; background-clip:content-box; }
  .hero__dot.is-active{ background-clip:content-box; }
  .chip{ padding:11px 20px; }
}

@media (max-width:640px){
  body{ font-size:14px; }
  :root{ --header-h:64px; }
  .header__logo img{ width:34px; }
  .header__logo-text{ font-size:20px; }
  .hero__slides{ min-height:54vh; }
  /* RISE/ABOVE のように span 間に空白がなく折り返せないため、
     最長の「RISEABOVE」が 320px 幅でも収まるサイズに抑える */
  .hero__title{ font-size:clamp(44px,14vw,110px); }
  .ticker__track span{ font-size:17px; }
  .news-grid{ grid-template-columns:1fr; gap:22px; }

  /* 部門タブは折り返さず横スクロールさせる */
  .tabs{
    flex-wrap:nowrap; overflow-x:auto; overscroll-behavior-x:contain;
    -webkit-overflow-scrolling:touch; scrollbar-width:none;
  }
  .tabs::-webkit-scrollbar{ display:none; }
  .tab{ flex:none; }
  .member-grid{ grid-template-columns:repeat(2,1fr); gap:14px; }
  .member__initial{ font-size:78px; }
  .member__name{ font-size:20px; }
  .about__data > div{ grid-template-columns:1fr; gap:2px; }
  .section{ padding:70px 0; }
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
  html{ scroll-behavior:auto; }
}