/* =====================================================
   修正版LP 追加スタイル
   （03-styles.css は元サイトのまま。上書き・追加分のみここに記載）

   トンマナ: FVビジュアルに合わせたパステル調
   - ベース: 淡いブルー (#d6e7ff〜#f6f9ff)
   - 文字: ネイビー (#33406b)
   - アクセント: 水色→ラベンダー→ピンクのグラデーション
   ===================================================== */

/* ---------- 全体トーン ---------- */
body {
  background-color: #e8f1ff;
  color: #33406b;
}
.container {
  background-color: #e9f2ff;
  background-image: linear-gradient(180deg, #d6e7ff 0%, #e9f2ff 45%, #f6f9ff 100%);
}

/* 各セクションの暗色背景画像を無効化 */
.artist::after,
.thought__body,
.entry {
  background-image: none;
}

/* セクション背景をFV同系統のパステル素材(bg01〜06.jpg)に差し替え */
.concept__inner {
  background-image: url(../images/bg01.jpg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.artist {
  background-image: url(../images/bg04.jpg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.support {
  background-image: url(../images/bg06.jpg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.conditions {
  background-image: url(../images/bg03.jpg);
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
}
.flow {
  background-image: url(../images/bg05.jpg);
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
}
.faq {
  background-image: url(../images/bg02.jpg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.entry-bottom__body {
  background-image: url(../images/bg01.jpg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* セクション見出しの下線をパステルグラデーションに */
.section-title::after {
  background: linear-gradient(to right, #8ec2ff, #c9a6ff, #ffb3dd);
}
/* 元デザインは日本語を英字に重ねる装飾だったが、明るい背景では読みにくいので
   日本語（小）→英字（大）の縦並びに変更（HTMLは英字が先なので column-reverse） */
.section-title {
  display: flex;
  flex-direction: column-reverse;
  align-items: center;
  padding-bottom: 10px;
}
.section-title__ja {
  position: static;
  transform: none;
  width: auto;
  opacity: 1;
  font-size: 14px;
  line-height: 1.4;
  letter-spacing: 0.24em;
  text-indent: 0.24em;
  color: #5a6ba8;
  margin-bottom: 2px;
  white-space: nowrap;
}
.section-title__en {
  font-size: 44px;
  line-height: 1.05;
}

/* ---------- 下部追従CTA ---------- */
.sticky-cta {
  position: fixed;
  bottom: 0;
  left: 50%;
  /* 「オープニングアクト出演決定」まで到達したら表示（05-script.js が is-visible を付与） */
  transform: translateX(-50%) translateY(110%);
  opacity: 0;
  pointer-events: none;
  transition:
    transform 0.35s ease-out,
    opacity 0.35s ease-out;
  width: 100%;
  z-index: 4500;
  padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px));
  background: rgba(255, 255, 255, 0.72);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  box-shadow: 0 -2px 12px rgba(140, 170, 255, 0.3);
}
@media screen and (min-width: 900px) {
  .sticky-cta {
    max-width: 24.375rem;
  }
}
.sticky-cta.is-visible {
  transform: translateX(-50%) translateY(0);
  opacity: 1;
  pointer-events: auto;
}
.sticky-cta .btn__inner {
  padding-top: 8px;
  padding-bottom: 8px;
}
.sticky-cta .btn__text > span {
  font-size: 24px;
}
/* 追従CTAに隠れないようページ末尾に余白 */
.company {
  padding-bottom: 110px;
}

/* ---------- 01 ファーストビュー ---------- */
/* 写真（images/mv.png・文字なし素材）＋HTMLコピーのオーバーレイ構成 */
.mv {
  position: relative;
  background-image: none;
  aspect-ratio: auto;
  /* iOS Safari はツールバー分だけ表示領域が狭いため、FVが画面高を超えないよう抑える
     （超えた分は写真の足元がカットされ、バッジ・デビュー日は常に画面内に収まる） */
  max-height: 100vh;
  max-height: 100svh;
  overflow: hidden;
}
.mv::before {
  content: none;
}
/* 写真は元の比率のまま表示（画面高を超える分は .mv の max-height でカット） */
.mv__img {
  display: block;
  width: 100%;
  height: auto;
}
/* 上部＝メイン＋サブ（顔にかからない位置）、下部＝バッジ */
.mv__copy-top {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  padding: 10px 16px 40px;
  text-align: center;
  background: linear-gradient(
    180deg,
    rgba(240, 247, 255, 0.85) 0%,
    rgba(240, 247, 255, 0.45) 65%,
    rgba(240, 247, 255, 0) 100%
  );
}
.mv__copy-bottom {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 48px 16px 26px;
  text-align: center;
  background: linear-gradient(
    0deg,
    rgba(240, 247, 255, 0.92) 30%,
    rgba(240, 247, 255, 0) 100%
  );
}
/* 参考: project-idol-2026 の hero-step 段階表示・text-glow・すりガラスバッジ */
.mv__label {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: "Shippori Mincho", serif;
  font-size: 11px;
  letter-spacing: 0.28em;
  text-indent: 0.28em;
  color: #4a5a94;
  text-shadow: 0 1px 6px rgba(255, 255, 255, 0.9);
  animation: mv-reveal 0.5s ease-out both;
}
.mv__label span {
  font-size: 10px;
  color: #9fb3e6;
}
/* メインコピー: ピンク→水色のグラデ帯（白文字・軽いスキュー） */
.mv__main {
  margin-top: 10px;
  animation: mv-reveal 0.6s ease-out 0.15s both;
}
.mv__main {
  margin-top: 6px;
}
.mv__main span {
  display: table;
  margin: 0 auto 4px;
  background: linear-gradient(100deg, #f59fc4, #b8a8ee, #9fc2f0);
  color: #fff;
  font-size: 17px;
  font-weight: 900;
  font-family: "Noto Sans JP", sans-serif;
  letter-spacing: 0.04em;
  line-height: 1;
  padding: 10px 16px;
  transform: skewX(-8deg);
  box-shadow: 0 4px 14px rgba(160, 140, 220, 0.4);
  text-shadow: 0 1px 4px rgba(120, 100, 180, 0.35);
}
.mv__main .mv__main-sub {
  font-size: 13px;
  letter-spacing: 0.1em;
  padding: 8px 16px;
  margin-bottom: 0;
}
/* 会場ロゴ（元の比率のまま・メンバーの顔にかからない高さに収める） */
.mv__venue {
  margin-top: 8px;
  animation: mv-reveal 0.6s ease-out 0.4s both;
}
.mv__venue img {
  display: block;
  width: 192px;
  max-width: 55%;
  /* 元画像は正方形で上下に余白が多いため、ロゴ部分だけを切り出す（ロゴ自体の比率は不変） */
  aspect-ratio: 400 / 170;
  object-fit: cover;
  object-position: center;
  margin-inline: auto;
  border-radius: 6px;
  box-shadow: 0 4px 14px rgba(90, 110, 180, 0.45);
}
/* サブコピー: 白帯で大きく（追従CTAの直上） */
.mv__sub {
  margin-top: 14px;
  animation: mv-reveal 0.6s ease-out 0.6s both;
}
.mv__sub span {
  display: inline-block;
  background: rgba(255, 255, 255, 0.95);
  color: #e0679a;
  font-size: 16px;
  font-weight: 800;
  font-family: "Noto Sans JP", sans-serif;
  letter-spacing: 0.04em;
  line-height: 1.5;
  padding: 10px 18px;
  transform: skewX(-8deg);
  box-shadow: 0 4px 12px rgba(140, 170, 255, 0.35);
}
.mv__sub span > strong {
  display: block;
  font-size: 21px;
  letter-spacing: 0.08em;
}
.mv__badges {
  margin-top: 14px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  list-style: none;
  padding: 0;
  animation: mv-reveal 0.6s ease-out 0.45s both;
}
.mv__badges li {
  background: rgba(255, 255, 255, 0.5);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.85);
  color: #33406b;
  font-size: 12px;
  font-weight: 700;
  font-family: "Noto Sans JP", sans-serif;
  padding: 6px 16px;
  border-radius: 999px;
  box-shadow: 0 2px 8px rgba(140, 170, 255, 0.25);
}
@keyframes mv-reveal {
  from {
    opacity: 0;
    transform: translateY(15px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
/* きらきら装飾（sparkle） */
.mv__deco {
  position: absolute;
  pointer-events: none;
  color: #fff;
  text-shadow: 0 0 10px rgba(255, 255, 255, 0.95);
  font-size: 18px;
  animation: mv-sparkle 2.4s ease-in-out infinite;
}
.mv__deco--1 {
  top: 13%;
  left: 7%;
}
.mv__deco--2 {
  top: 19%;
  right: 9%;
  font-size: 14px;
  animation-delay: 0.6s;
}
.mv__deco--3 {
  top: 44%;
  left: 5%;
  font-size: 15px;
  animation-delay: 1.2s;
}
.mv__deco--4 {
  top: 50%;
  right: 6%;
  animation-delay: 1.8s;
}
@keyframes mv-sparkle {
  0%,
  100% {
    opacity: 0.15;
    transform: scale(0.6) rotate(0deg);
  }
  50% {
    opacity: 1;
    transform: scale(1) rotate(180deg);
  }
}

/* ---------- FV直下・デビュー訴求バナー ---------- */
.debut-banner {
  position: relative;
  margin-top: 44px;
  background: linear-gradient(100deg, #f287bd, #a996e8, #82abee);
  text-align: center;
  padding: 0 0 20px;
  box-shadow: 0 8px 24px rgba(150, 160, 230, 0.4);
}
.debut-banner__chips {
  display: flex;
  justify-content: center;
  gap: 6px;
  list-style: none;
  padding: 0 8px;
  transform: translateY(-50%);
  margin-bottom: -8px;
}
.debut-banner__chips li {
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  font-family: "Noto Sans JP", sans-serif;
  padding: 6px 11px;
  border-radius: 999px;
  white-space: nowrap;
  box-shadow: 0 3px 8px rgba(60, 40, 120, 0.35);
}
.debut-banner__chips li:nth-child(1) {
  background: #ec6fae;
}
.debut-banner__chips li:nth-child(2) {
  background: #8a6cd9;
}
.debut-banner__chips li:nth-child(3) {
  background: #4a5aa8;
}
/* ラベルバー＋極太タイトル（中央寄せ） */
.debut-banner__head {
  text-align: center;
  padding: 0 14px;
}
.debut-banner__title-en {
  display: block;
  font-size: 32px;
  letter-spacing: 0.02em;
  line-height: 1.2;
  margin-bottom: 4px;
}
.debut-banner__title {
  margin-top: 4px;
  /* 「CAMPUS COLLECTIONで」が1行に収まる範囲で最大化 */
  font-size: clamp(22px, 7.4vw, 30px);
  line-height: 1.35;
  font-weight: 900;
  font-family: "Noto Sans JP", sans-serif;
  letter-spacing: 0.01em;
  white-space: nowrap;
  color: #fff;
  text-shadow:
    0 2px 4px rgba(90, 80, 170, 0.5),
    0 4px 18px rgba(90, 80, 170, 0.6);
}
/* 日程・会場を白帯で強調 */
.debut-banner__date {
  margin-top: 16px;
  background: #fff;
  border-radius: 6px;
  padding: 11px 12px 13px;
  box-shadow: 0 4px 14px rgba(90, 70, 160, 0.3);
}
.debut-banner__date-num {
  display: block;
  font-size: 26px;
  font-weight: 900;
  font-family: "Noto Sans JP", sans-serif;
  letter-spacing: 0.04em;
  line-height: 1.15;
  background: linear-gradient(100deg, #f0409a, #7b5cf0);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.debut-banner__date-venue {
  display: block;
  margin-top: 2px;
  font-size: 16px;
  font-weight: 800;
  font-family: "Noto Sans JP", sans-serif;
  letter-spacing: 0.04em;
  color: #4a4a8c;
}

.debut-banner__photos {
  display: grid;
  grid-template-columns: 1fr;
  padding: 18px 16px 4px;
}
.debut-banner__photos img {
  width: 100%;
  height: auto;
  border-radius: 8px;
  border: 3px solid #fff;
  box-shadow: 0 4px 12px rgba(60, 40, 120, 0.35);
}

/* ---------- CTAボタン共通（黒＋ネオン → パステルグラデ塗り） ---------- */
.btn > a {
  background: linear-gradient(to right, #7db8ff, #b79cff, #ff9ad5);
  box-shadow: 0 6px 18px rgba(140, 170, 255, 0.45);
}
.btn__inner {
  background-color: transparent;
}
/* 元CSSの max-width:120px では「LINEから応募する」が折り返すため解除 */
.btn__text {
  max-width: none;
  width: auto;
  white-space: nowrap;
  text-align: center;
}
.btn__text > span {
  display: block;
}
/* 「LINEからオーディションに応募する」がアイコンと重ならないよう縮小 */
.entry-bottom__btn .btn__text {
  font-size: 12px;
  margin-left: 26px;
}

/* ---------- ナビ（SPドロワー・PC） ---------- */
.sp-nav {
  background-color: #eef4ff;
  background-image: none;
}
.sp-nav__item > a {
  color: #33406b;
}
.sp-nav__item > a > img,
.pc-nav__item > a > img {
  filter: invert(0.75) sepia(0.2) saturate(2) hue-rotate(195deg);
}
.pc-nav {
  background-color: #ffffff;
  background-image: none;
  box-shadow: 0 8px 24px rgba(140, 170, 255, 0.25);
}
.pc-nav__item > a {
  color: #33406b;
}

/* ---------- PC固定CTA ---------- */
.cta__title--text {
  text-align: center;
  font-size: 32px;
  line-height: 1.5;
  font-weight: 700;
}
.cta__subtitle {
  border-bottom-color: #33406b;
}
.cta__subtitle span {
  display: block;
  font-size: 17px;
  margin-top: 8px;
  letter-spacing: 0.08em;
}

/* ---------- 04 OPERATOR（.artist のスタイルを流用） ---------- */
/* LEMロゴ（白抜き）カード */
.operator__logo-card {
  background: #33406b;
  border-radius: 10px;
  padding: 36px 20px;
  box-shadow: 0 6px 18px rgba(90, 110, 170, 0.3);
}
.operator__logo-card img {
  display: block;
  width: 190px;
  max-width: 60%;
  margin-inline: auto;
}
.operator__copy {
  margin-top: 26px;
  font-size: 20px;
  line-height: 1.7;
  text-align: center;
  font-weight: 500;
}
.operator__body {
  margin-top: 24px;
}
.artist__thumbnail img,
.operator__carousel img {
  border-radius: 6px;
}
/* イベント写真の自動横スクロールカルーセル（前半5枚＋複製5枚で無限ループ） */
.operator__carousel {
  margin-top: 32px;
  overflow: hidden;
}
.operator__track {
  display: flex;
  width: -webkit-max-content;
  width: max-content;
  animation: operator-scroll 30s linear infinite;
}
.operator__track img {
  width: 230px;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  margin-right: 12px;
  box-shadow: 0 4px 14px rgba(140, 170, 255, 0.3);
}
@keyframes operator-scroll {
  to {
    transform: translateX(-50%);
  }
}

/* ---------- 05 SUPPORT ---------- */
.support-item__img img {
  border-radius: 6px 6px 0 0;
}
/* 背景の柄とテキストが被らないよう白カード化 */
.support-item__inner {
  background: rgba(255, 255, 255, 0.72);
  border-radius: 6px;
  padding-bottom: 14px;
  overflow: hidden;
}
.support-item__title,
.support-item__text {
  padding-left: 12px;
  padding-right: 12px;
}

/* ---------- 06 CONDITIONS / 07 FLOW ---------- */
/* ネオングラデ枠→パステル枠、黒カード→白カード */
.conditions__item,
.flow-item__head {
  background: linear-gradient(135deg, #8ec2ff, #c9a6ff, #ffb3dd);
}
.conditions__item-inner,
.flow-item__inner {
  background-color: #fff;
}
/* 白線SVGアイコンを白カード上でも見えるようネイビー寄りに反転 */
.conditions__icon img,
.flow-item__img img,
.flow-item__arrow img {
  filter: invert(0.75) sepia(0.2) saturate(2) hue-rotate(195deg);
}

/* ---------- 08 LINE誘導（テキスト版） ---------- */
.line a {
  display: block;
  color: #fff;
}
.line__inner {
  padding: 22px 16px 24px;
  text-align: center;
}
.line__title {
  font-size: 20px;
  line-height: 1.5;
}
.line__subtitle p {
  border-bottom-color: #fff;
}
.line__cta {
  margin-top: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: #ffffff;
  color: #06c755;
  border-radius: 8px;
  padding: 13px;
  font-size: 15px;
  font-weight: 700;
  font-family: "Noto Sans JP", sans-serif;
  max-width: 330px;
  margin-inline: auto;
}
.line__cta img {
  width: 26px;
  filter: invert(62%) sepia(66%) saturate(2411%) hue-rotate(93deg) brightness(96%) contrast(92%);
}

/* ---------- 09 FAQ ---------- */
/* 雪の結晶柄の背景と文字がかぶるため白カードを敷く */
.faq__list {
  background: rgba(255, 255, 255, 0.72);
  border-radius: 8px;
  padding: 2px 14px 12px;
}
.faq__item {
  border-bottom-color: rgba(90, 120, 190, 0.4);
}
.faq__question::before,
.faq__item.open .faq__question::before {
  color: #33406b;
}

/* ---------- 10 最終CTA ---------- */
.entry-bottom__title--text {
  text-align: center;
  font-size: 19px;
  line-height: 1.75;
  font-weight: 700;
  letter-spacing: 0.02em;
}

/* ---------- 11 フッター ---------- */
.company__title {
  border-bottom-color: rgba(90, 120, 190, 0.4);
}
.company__title::before,
.company__title.is-open::before {
  color: #33406b;
}
.company__privacy-inner {
  border-radius: 6px;
}
/* LEMロゴ（白抜き）はネイビー地に載せる */
.company__logo {
  background: #33406b;
  border-radius: 8px;
  padding: 20px 28px;
  width: -webkit-max-content;
  width: max-content;
  margin: 24px auto 0;
}
.company__logo img {
  width: 120px;
  display: block;
}