@charset "UTF-8";
/* =========================================================
   CHANCE GALs 特設ページ専用スタイル
   白 × パステルピンク基調。本体サイト（黒基調の高級路線）とは
   意図的に別の表情にする。style.css の後に読み込んで上書きする。
   ========================================================= */

.gals {
  --g-bg: #fff;
  --g-bg2: #fff6f9;          /* ごく淡いピンク */
  --g-bg3: #fdeff4;          /* セクション帯 */
  --g-fg: #33262d;           /* 温かみのあるチャコール */
  --g-fg-sub: #8c7b84;
  --g-pink: #ffa6c6;         /* パステルピンク（面） */
  --g-pink-deep: #e8548c;    /* 文字・線に使う濃いめのピンク */
  --g-lav: #c9b6f5;          /* 差し色のラベンダー */
  --g-cream: #ffe9c9;        /* 差し色のクリーム */
  --g-line: rgba(51, 38, 45, .12);
  --g-line2: rgba(232, 84, 140, .28);
  background: var(--g-bg);
  color: var(--g-fg);
}
.gals .inner { width: min(100% - 40px, 1180px); margin-inline: auto; }

/* ---- ヒーロー ---- */
.g-hero {
  position: relative; min-height: 100svh; display: grid; align-items: center; justify-items: center;
  text-align: center; overflow: hidden; padding: 150px 0 110px;
}
.g-hero .bg { position: absolute; inset: 0; }
.g-hero .bg img { width: 100%; height: 100%; object-fit: cover; object-position: center 20%; opacity: .5; }
.g-hero .bg::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(255,255,255,.72) 0%, rgba(255,255,255,.3) 40%,
                              rgba(255,255,255,.85) 100%);
}
/* 写真なしのグラデーション版 */
.g-hero .bg-plain {
  background:
    radial-gradient(56% 46% at 16% 14%, rgba(255,166,198,.75), transparent 70%),
    radial-gradient(50% 44% at 86% 22%, rgba(201,182,245,.6), transparent 70%),
    radial-gradient(58% 46% at 50% 98%, rgba(255,233,201,.6), transparent 72%),
    linear-gradient(180deg, #fff 0%, var(--g-bg2) 55%, #fff 100%);
}
.g-hero .bg-plain::after {
  content: ""; position: absolute; inset: 0;
  background-image: repeating-linear-gradient(0deg, rgba(51,38,45,.022) 0 1px, transparent 1px 4px);
}
.g-hero .inner { position: relative; z-index: 2; }
.g-hero .inner::before {
  content: ""; position: absolute; left: 50%; top: 46%; translate: -50% -50%;
  width: min(900px, 92vw); height: 340px; z-index: -1; pointer-events: none;
  background: radial-gradient(closest-side, rgba(255,255,255,.85), rgba(255,255,255,0));
}

.g-kicker {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: "DM Sans", sans-serif; font-size: 10.5px; letter-spacing: .24em;
  color: var(--g-pink-deep);
  border: 1px solid var(--g-line2); border-radius: 999px; padding: 8px 20px;
  background: rgba(255,255,255,.82); backdrop-filter: blur(6px);
}
.g-kicker::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--g-pink-deep);
  animation: gPulse 1.8s ease-in-out infinite;
}
@keyframes gPulse { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: .35; transform: scale(.7); } }

.g-title {
  margin: 24px 0 20px;
  font-family: "Montserrat", sans-serif; font-weight: 900; font-style: italic;
  font-size: clamp(44px, 12vw, 148px); line-height: .92; letter-spacing: -.01em;
  background: linear-gradient(100deg, #f2779f 12%, #e8548c 38%, #b98ff0 68%, #f2779f 92%);
  background-size: 250% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: gShine 7s linear infinite;
}
@keyframes gShine { to { background-position: 250% 0; } }
.g-title small {
  display: block; font-size: .2em; font-style: normal; font-weight: 500;
  letter-spacing: .5em; color: var(--g-fg-sub); -webkit-text-fill-color: var(--g-fg-sub);
  margin-top: 18px;
}

.g-tagline {
  font-size: clamp(15px, 2.6vw, 24px); font-weight: 700; line-height: 1.9; letter-spacing: .04em;
  max-width: 780px; margin-inline: auto; color: var(--g-fg);
}
.g-hero .g-lead {
  margin-top: 18px; font-size: 13.5px; line-height: 2.1;
  color: var(--g-fg-sub); max-width: 720px; margin-inline: auto;
}

/* 流れるテロップ */
.g-marquee { overflow: hidden; background: var(--g-bg3); border-block: 1px solid var(--g-line2); }
.g-marquee ul { display: flex; gap: 44px; width: max-content; padding: 15px 0;
  animation: gRoll 28s linear infinite; }
.g-marquee li { font-family: "Montserrat", sans-serif; font-weight: 800; font-style: italic;
  font-size: 15px; letter-spacing: .1em; color: rgba(232,84,140,.62); white-space: nowrap; }
.g-marquee li em { font-style: normal; color: var(--g-pink-deep); }
@keyframes gRoll { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .g-marquee ul { animation: none; } .g-title { animation: none; } }

/* ---- セクション ---- */
.g-sec { padding: 104px 0; position: relative; background: var(--g-bg); }
.g-sec.tint { background: linear-gradient(180deg, var(--g-bg2), #fff); }
.g-head { margin-bottom: 52px; }
.g-head .en {
  display: block; font-family: "Montserrat", sans-serif; font-weight: 900; font-style: italic;
  font-size: clamp(30px, 6.4vw, 62px); line-height: 1; letter-spacing: -.01em;
  color: transparent; -webkit-text-stroke: 1.5px var(--g-pink);
}
.g-head .ja { display: block; margin-top: 14px; font-size: 12px; letter-spacing: .3em; color: var(--g-pink-deep); }

/* ---- 3つの特徴 ---- */
.g-points { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.g-point {
  border: 1px solid var(--g-line); border-radius: 18px; padding: 34px 28px;
  background: linear-gradient(165deg, #fff, var(--g-bg2));
  box-shadow: 0 10px 30px rgba(232,84,140,.06);
}
.g-point .no { font-family: "DM Sans", sans-serif; font-size: 10.5px; letter-spacing: .28em; color: var(--g-pink-deep); }
.g-point h3 { margin: 14px 0 12px; font-size: 21px; font-weight: 800; letter-spacing: .04em; }
.g-point p { font-size: 13.5px; line-height: 2; color: var(--g-fg-sub); }

/* ---- 本文 ---- */
.g-body p { font-size: 15px; line-height: 2.3; color: #4b3d44; margin-bottom: 20px; max-width: 900px; }

/* ---- メンバー ---- */
.g-members { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.g-member {
  position: relative; border: 1px solid var(--g-line); border-radius: 16px; overflow: hidden;
  padding: 0; background: #fff;
  transition: transform .4s cubic-bezier(.2,.7,.3,1), border-color .4s, box-shadow .4s;
}
/* 押せるのはプロフィールがあるメンバーだけ。浮き上がる演出もそのときだけにする
   （リンクが無いのに反応すると、押しても入れない＝壊れているように見えるため） */
.g-member.has-link:hover {
  transform: translateY(-6px); border-color: var(--g-pink); opacity: 1;
  box-shadow: 0 16px 36px rgba(232,84,140,.14);
}
.g-member.has-link { cursor: pointer; }
/* カードのどこを押してもプロフィールへ入れるようにする。
   写真のリンクをカード全体に広げる（文字リンクは上に重ねて残す）。
   スマホで名前の脇を押しても反応しない、という取りこぼしを無くすため。 */
.g-member.has-link .g-photo-link::after {
  content: ""; position: absolute; inset: 0; z-index: 2;
}
.g-member .g-info { position: relative; }
/* 文字リンクだけは重なりの上に出しておく（ホバーの見た目を保つため） */
.g-member .g-info .link { position: relative; z-index: 3; }
.g-photo { position: relative; aspect-ratio: 3/4; overflow: hidden; background: var(--g-bg3); }
.g-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center 22%;
  transition: transform .8s cubic-bezier(.2,.7,.3,1); }
.g-member:hover .g-photo img { transform: scale(1.06); }
.g-photo .idx {
  position: absolute; left: 12px; top: 12px; z-index: 2;
  font-family: "DM Sans", sans-serif; font-size: 10px; letter-spacing: .18em; color: var(--g-pink-deep);
  background: rgba(255,255,255,.86); backdrop-filter: blur(4px);
  border-radius: 999px; padding: 5px 11px;
}
.g-photo::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 62%, rgba(255,255,255,.55) 100%);
}
.g-info { padding: 18px 20px 22px; }
.g-info .nm { font-family: "Montserrat", sans-serif; font-weight: 800; font-size: 19px; letter-spacing: .03em; }
/* 写真のリンクはブロックにしておく（インラインのままだと端末によって押せる範囲が狂う） */
.g-photo-link { display: block; }
@media (max-width: 900px) {
  /* 指で押す前提の幅では、単独リンクの当たり判定を広げる */
  .g-back a { display: inline-flex; align-items: center; min-height: 40px; }
}
.g-info .nm a { color: inherit; }
.g-info .rom { margin-top: 4px; font-family: "DM Sans", sans-serif; font-size: 10.5px;
  letter-spacing: .2em; color: var(--g-fg-sub); text-transform: uppercase; }
.g-info .role { display: inline-block; margin-top: 10px; font-size: 10px; letter-spacing: .18em;
  border: 1px solid var(--g-pink-deep); color: var(--g-pink-deep); border-radius: 999px; padding: 4px 12px; }
.g-info .meta { margin-top: 10px; font-size: 11.5px; line-height: 1.8; color: var(--g-fg-sub); }
.g-info .link { display: inline-block; margin-top: 12px; font-size: 10.5px; letter-spacing: .12em;
  color: var(--g-pink-deep); border-bottom: 1px solid currentColor; padding-bottom: 2px; }
.g-info .link.out { color: var(--g-fg-sub); }
.g-note { margin-top: 26px; font-size: 12.5px; line-height: 2; color: var(--g-fg-sub); }

/* ---- 沿革 ---- */
.g-history { border-top: 1px solid var(--g-line); }
.g-history li { display: grid; grid-template-columns: 130px 1fr; gap: 20px; align-items: baseline;
  padding: 20px 4px; border-bottom: 1px solid var(--g-line); }
.g-history time { font-family: "DM Sans", sans-serif; font-size: 14px; letter-spacing: .1em; color: var(--g-pink-deep); }
.g-history p { font-size: 14.5px; line-height: 1.8; }

/* ---- 楽曲 ---- */
.g-songs { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.g-song {
  border: 1px solid var(--g-line); border-radius: 18px; padding: 30px 28px;
  background: linear-gradient(140deg, rgba(255,166,198,.24), rgba(201,182,245,.16));
}
.g-song h3 { font-family: "Montserrat", sans-serif; font-weight: 900; font-style: italic;
  font-size: 30px; letter-spacing: .01em; color: var(--g-fg); }
.g-song p { margin-top: 12px; font-size: 13px; color: var(--g-fg-sub); line-height: 1.9; }
.g-song .dam { display: inline-block; margin-top: 14px; font-size: 10.5px; letter-spacing: .18em;
  border: 1px solid var(--g-line2); border-radius: 999px; padding: 6px 14px; color: var(--g-pink-deep);
  background: rgba(255,255,255,.7); }

/* ---- ギャラリー ---- */
.g-gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.g-gallery figure { position: relative; aspect-ratio: 16/10; overflow: hidden; border-radius: 14px;
  background: var(--g-bg3); border: 1px solid var(--g-line); }
.g-gallery img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s; }
.g-gallery figure:hover img { transform: scale(1.06); }

/* ---- オーディション CTA ---- */
.g-cta {
  position: relative; border-radius: 26px; overflow: hidden; padding: 74px 40px; text-align: center;
  background: linear-gradient(120deg, rgba(255,166,198,.9), rgba(201,182,245,.75) 60%, rgba(255,233,201,.85));
  color: var(--g-fg);
  box-shadow: 0 20px 50px rgba(232,84,140,.14);
}
.g-cta h2 { font-family: "Montserrat", sans-serif; font-weight: 900; font-style: italic;
  font-size: clamp(30px, 6vw, 60px); line-height: 1.05; color: #fff;
  text-shadow: 0 2px 18px rgba(232,84,140,.35); }
.g-cta .sub { margin-top: 18px; font-size: 14.5px; font-weight: 700; line-height: 2; }
.g-cta ul { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 26px; }
.g-cta li { font-size: 11.5px; font-weight: 700; letter-spacing: .1em;
  background: rgba(255,255,255,.68); border-radius: 999px; padding: 8px 18px; }
.g-btn { display: inline-block; margin-top: 32px; background: #fff; color: var(--g-pink-deep);
  font-size: 13px; font-weight: 700; letter-spacing: .18em; padding: 18px 52px; border-radius: 999px;
  box-shadow: 0 8px 22px rgba(232,84,140,.2); }
.g-btn:hover { opacity: 1; background: var(--g-pink-deep); color: #fff; }

/* ---- 情報テーブル ---- */
.g-table { width: 100%; border-collapse: collapse; }
.g-table th, .g-table td { border-bottom: 1px solid var(--g-line); padding: 16px 8px;
  text-align: left; font-size: 13.5px; line-height: 1.9; vertical-align: top; }
.g-table th { width: 200px; color: var(--g-fg-sub); font-weight: 400; letter-spacing: .16em; font-size: 12px; }

/* ---- 本体サイトへ戻る帯 ---- */
.g-back { border-top: 1px solid var(--g-line); padding: 40px 0; text-align: center; background: var(--g-bg2); }
.g-back a { font-size: 12.5px; letter-spacing: .16em; color: var(--g-fg-sub);
  border-bottom: 1px solid var(--g-line); padding-bottom: 5px; }

/* ---- このページ内のヘッダー／パンくず／ドロワー ---- */
.gals header.site {
  background: rgba(255,255,255,.92); border-bottom-color: var(--g-line); color: var(--g-fg);
}
.gals header.site .head-cta { background: var(--g-pink-deep); color: #fff; }
.gals .crumbs { background: var(--g-bg); border-bottom-color: var(--g-line); }
.gals .crumbs ol { color: var(--g-fg-sub); }
.gals .crumbs li[aria-current] { color: var(--g-fg); }
.gals .glnv { background: var(--g-bg); color: var(--g-fg); }
.gals .glnv-area { border-top-color: var(--g-line); }
.gals .glnv-area li a, .gals .glnv-foot { color: var(--g-fg-sub); }
/* フッターは本体サイト共通の黒のままにして、ページの締まりを保つ */

@media (max-width: 900px) {
  .g-points, .g-songs, .g-gallery { grid-template-columns: repeat(2, 1fr); }
  .g-members { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 640px) {
  .g-sec { padding: 68px 0; }
  .g-points, .g-songs, .g-gallery { grid-template-columns: 1fr; }
  .g-members { grid-template-columns: repeat(2, 1fr); }
  .g-history li { grid-template-columns: 1fr; gap: 6px; }
  .g-cta { padding: 52px 22px; border-radius: 18px; }
  .g-table th { width: 110px; font-size: 11px; }
}

/* =========================================================
   番組・動画への導線
   ========================================================= */
.g-watch { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.g-w {
  display: grid; align-content: start; gap: 8px;
  border: 1px solid var(--g-line); border-radius: 18px; padding: 30px 26px 26px;
  background: #fff; box-shadow: 0 10px 30px rgba(232,84,140,.06);
  transition: transform .4s cubic-bezier(.2,.7,.3,1), box-shadow .4s, border-color .4s;
}
.g-w:hover { transform: translateY(-6px); opacity: 1; box-shadow: 0 18px 40px rgba(232,84,140,.14); }
.g-w .tag {
  justify-self: start; font-family: "DM Sans", sans-serif; font-size: 10px; letter-spacing: .2em;
  border-radius: 999px; padding: 6px 14px; color: #fff;
}
.g-w.abema   .tag { background: #33262d; }
.g-w.youtube .tag { background: #ff0033; }
.g-w.site    .tag { background: var(--g-pink-deep); }
.g-w.abema:hover   { border-color: #33262d; }
.g-w.youtube:hover { border-color: #ff0033; }
.g-w.site:hover    { border-color: var(--g-pink-deep); }
.g-w .ttl { margin-top: 6px; font-size: 17px; font-weight: 800; line-height: 1.7; letter-spacing: .03em; }
.g-w .sub { font-size: 12.5px; line-height: 1.9; color: var(--g-fg-sub); }
.g-w .go {
  margin-top: 10px; font-size: 11px; letter-spacing: .16em; color: var(--g-pink-deep);
  border-bottom: 1px solid currentColor; padding-bottom: 3px; justify-self: start;
}

/* 追従ボタン（ABEMAで無料視聴） */
.g-float {
  position: fixed; right: 20px; bottom: 20px; z-index: 95;
  display: grid; gap: 4px; justify-items: center;
  background: #33262d; color: #fff; border-radius: 16px; padding: 14px 22px;
  box-shadow: 0 14px 34px rgba(51,38,45,.34);
  transition: transform .35s cubic-bezier(.2,.7,.3,1);
}
.g-float:hover { transform: translateY(-3px); opacity: 1; }
.g-float-mark {
  font-family: "Montserrat", sans-serif; font-weight: 900; font-style: italic;
  font-size: 20px; letter-spacing: .04em; line-height: 1;
}
.g-float-txt { font-size: 10.5px; letter-spacing: .12em; color: rgba(255,255,255,.86); }

@media (max-width: 900px) { .g-watch { grid-template-columns: 1fr; } }
@media (max-width: 640px) {
  .g-float { right: 12px; bottom: 12px; padding: 11px 16px; border-radius: 13px; }
  .g-float-mark { font-size: 16px; }
  .g-float-txt { font-size: 9.5px; }
}

/* =========================================================
   ヒーローのきらめき
   ========================================================= */
.g-sparkles { position: absolute; inset: 0; pointer-events: none; z-index: 1; }

/* 星の形は clip-path で作る */
.g-sparkle, .g-star {
  position: absolute; display: block; pointer-events: none;
  background: radial-gradient(circle at 50% 50%, #fff 0%, #ff8dbb 38%, rgba(232,84,140,0) 74%);
  clip-path: polygon(50% 0%, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0% 50%, 39% 39%);
}

/* 常時きらめく星（配置と速度はビルド時に決めている） */
.g-sparkle {
  left: var(--x); top: var(--y);
  width: calc(22px * var(--s)); height: calc(22px * var(--s));
  margin: calc(-11px * var(--s));
  opacity: 0;
  animation: gTwinkle var(--t) ease-in-out var(--d) infinite;
  filter: drop-shadow(0 0 5px rgba(232,84,140,.6)) drop-shadow(0 0 12px rgba(255,141,187,.45));
}
@keyframes gTwinkle {
  0%, 100% { opacity: 0; transform: scale(.3) rotate(0deg); }
  35%      { opacity: var(--o); transform: scale(1) rotate(35deg); }
  65%      { opacity: calc(var(--o) * .55); transform: scale(.78) rotate(70deg); }
}

/* カーソルを追いかける星 */
.g-star {
  width: 18px; height: 18px; margin: -9px 0 0 -9px; z-index: 3;
  will-change: transform, opacity;
  animation: gTrail var(--life, 900ms) cubic-bezier(.2,.7,.3,1) forwards;
  filter: drop-shadow(0 0 6px rgba(232,84,140,.75)) drop-shadow(0 0 16px rgba(255,141,187,.5));
}
.g-star.b { background: radial-gradient(circle at 50% 50%, #fff 0%, #a98cf5 42%, rgba(169,140,245,0) 74%); }
.g-star.c { background: radial-gradient(circle at 50% 50%, #fff 0%, #ffc46b 42%, rgba(255,196,107,0) 74%); }
@keyframes gTrail {
  0%   { opacity: 0; transform: translate3d(0,0,0) scale(.2) rotate(0deg); }
  18%  { opacity: 1; transform: translate3d(0,0,0) scale(var(--sc, 1)) rotate(25deg); }
  100% { opacity: 0;
         transform: translate3d(var(--dx, 0px), var(--dy, 26px), 0) scale(.25) rotate(140deg); }
}

/* カーソル本体に寄り添う小さな光 */
.g-glow {
  position: fixed; z-index: 4; width: 26px; height: 26px; margin: -13px 0 0 -13px;
  border-radius: 50%; pointer-events: none; opacity: 0;
  background: radial-gradient(circle, rgba(255,255,255,.95), rgba(255,166,198,.5) 45%, transparent 70%);
  transition: opacity .3s;
}
.g-glow.on { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .g-sparkle { animation: none; opacity: var(--o); }
  .g-star, .g-glow { display: none; }
}

/* =========================================================
   メンバーのプロフィールページ（/chance-gals/○○/）
   ========================================================= */
.gm-head { padding-bottom: 0; text-align: center; }
.gm-kicker { font-family: "DM Sans", sans-serif; font-size: 10.5px; letter-spacing: .3em;
  color: var(--g-pink-deep); }
.gm-head h1 { margin-top: 14px; font-family: "Montserrat", sans-serif; font-weight: 800;
  font-size: clamp(30px, 5vw, 46px); letter-spacing: .06em; }
.gm-note { margin: 16px auto 0; max-width: 680px; font-size: 14px; line-height: 2.1;
  color: var(--g-fg-sub); }

.inner.gm-lead { display: grid; grid-template-columns: minmax(0, 420px) minmax(0, 1fr);
  gap: 40px; align-items: start; }
.gm-hero { margin: 0; border-radius: 18px; overflow: hidden; background: var(--g-bg3); }
.gm-hero img { width: 100%; height: auto; display: block; }
.gm-facts { min-width: 0; }
/* 共通の keyfacts をこのページの配色に寄せる */
.gm-facts .keyfacts { border-top: 1px solid var(--g-line); }
.gm-facts .keyfacts dt, .gm-facts .keyfacts th { color: var(--g-fg-sub); }

.gm-body { max-width: 860px; margin-inline: auto; }
.gm-body p { font-size: 15px; line-height: 2.3; color: #4b3d44; margin-bottom: 20px; }
.gm-body h2 { margin: 36px 0 14px; font-family: "Montserrat", sans-serif; font-weight: 800;
  font-size: 20px; letter-spacing: .04em; }
.gm-body img { max-width: 100%; height: auto; border-radius: 12px; }

/* 下部のボタン。2本並ぶので余白を詰める */
/* 2つ並ぶボタンの上端を揃える（inline-block のベースライン揃えだと1pxずれる） */
.g-cta .g-btn { margin: 10px 8px 0; vertical-align: top; }
.g-btn.ghost { background: transparent; color: var(--g-pink-deep);
  border: 1px solid var(--g-pink-deep); }
.g-btn.ghost:hover { background: var(--g-pink-deep); color: #fff; }

@media (max-width: 820px) {
  .inner.gm-lead { grid-template-columns: 1fr; gap: 26px; }
  .gm-hero { max-width: 420px; margin-inline: auto; }
}