@charset "UTF-8";
/* =====================================================================
   Phase 2D — PC版 人間検収フィードバックの反映
   phase2c.css の後に読み込む。SP表示は原則そのまま維持する。
   ===================================================================== */

/* ---------------------------------------------------------------------
   #1 FV：旧「今すぐ応募！」はKV画像から物理的に切り落とした
   （key_images/kv_20260812_nocta.webp 1000x1528）。
   主CTAは「無料でオーディションに応募する」の1つだけ。
   --------------------------------------------------------------------- */
.p2b-fv{ margin-top:0; }

/* ---------------------------------------------------------------------
   #2 出演作品カード：作品タイトルと人物の両方を見せる
   ポスターは縦長なので、カード画像領域を縦長にして全体を収める。
   --------------------------------------------------------------------- */
.section-8 .box .box-img{
  width:100%;
  background:#0d1c33;                 /* 余白が出ても黒地で自然に見せる */
}
.section-8 .box .box-img img{
  width:100% !important;
  height:auto !important;
  max-height:none !important;
  object-fit:contain !important;      /* タイトルも顔もクロップしない */
  object-position:center center !important;
}

/* ---------------------------------------------------------------------
   #3 #4 #5 過去出演者案件例
   --------------------------------------------------------------------- */
.section-11 .content .row{ justify-content:center; }

/* #4 背景写真の上に乗るので、セクション全体に暗幕を敷いて明度差を確保する */
.section-11 .content{ position:relative; }
.section-11 .content::before{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(6,12,24,.74) 0%, rgba(6,12,24,.62) 45%, rgba(6,12,24,.80) 100%);
  pointer-events:none;
}
.section-11 .content > .container{ position:relative; z-index:1; }

.section-11 .content h3{
  text-shadow:0 2px 10px rgba(0,0,0,.65);
}
.section-11 .p2b-lead{
  background:rgba(4,10,20,.80) !important;
  border:1px solid rgba(255,255,255,.14);
  color:#fff !important;
}

/* #3 集計表示をセクション中央へ */
.p2c-stat{
  width:100%;
  max-width:520px;
  margin-left:auto !important;
  margin-right:auto !important;
  padding:12px 16px;
  border-radius:10px;
  background:rgba(4,10,20,.78);
  border:1px solid rgba(199,170,105,.45);
  justify-content:center !important;
  text-align:center;
}
.p2c-stat-num{
  color:#fff !important;
  text-shadow:0 2px 8px rgba(0,0,0,.6);
}
.p2c-stat-unit{ color:#fff; }

/* #4 ボタンの視認性 */
.section-11 .p2c-more{
  background:#fff !important;
  border-color:#fff !important;
  color:#1b2430 !important;
  box-shadow:0 4px 16px rgba(0,0,0,.35);
}
.section-11 .p2c-more:hover{ background:var(--p2b-gold,rgba(255,255,255,.55)) !important; color:#1b2430 !important; }

/* #5 初期表示（4ジャンル25件）と展開分（1ジャンル29件） */
.section-11 ul.left{
  max-width:860px;
  margin-left:auto !important;
  margin-right:auto !important;
  background:rgba(255,255,255,.96) !important;
  color:var(--p2c-ink,#1b2430) !important;
}
.section-11 .p2c-list-rest{ margin-top:8px !important; }
.section-11 .p2c-disclosure{ margin-top:4px; }

/* 代表案件チップも中央の帯として揃える */
.p2c-pick{
  max-width:860px;
  margin-left:auto !important;
  margin-right:auto !important;
}

/* ---------------------------------------------------------------------
   #6 「応募はカンタン 入力1分」を一文として自然に読ませる
   --------------------------------------------------------------------- */
/* phase2b の #fff はクリーム地だとほぼ読めないため、濃いオレンジへ。
   「応募はカンタン 入力1分」が一文として自然に読める強調にする。 */
.p2b-formlead .p2b-formlead-head em,
.p2b-formlead .p2c-mark{
  display:inline !important;
  padding:0 !important;
  background:none !important;
  box-shadow:none !important;
  color:#05326e !important;
  font-style:normal !important;
  font-weight:900 !important;
  text-shadow:none !important;
  border-bottom:3px solid rgba(255,122,26,.5);
  margin:0 4px;
}

/* ---------------------------------------------------------------------
   #10 CTA内の黄色バッジを全廃（CTAは同一トーンで一体表示）
   --------------------------------------------------------------------- */
a.btn-block .p2c-mark,
.p2b-cta .p2c-mark,
#form .submitbtn .p2c-mark{
  display:inline !important;
  padding:0 !important;
  background:none !important;
  box-shadow:none !important;
  color:inherit !important;
  font-size:inherit !important;
  font-weight:inherit !important;
  border:0 !important;
}
a.btn-block .p2c-cta-label{
  display:inline;
  font-size:inherit;
  font-weight:inherit;
  letter-spacing:inherit;
}

/* ---------------------------------------------------------------------
   #7 #8 「こんな思い」：高精細版の背景に差し替え（PC）
   素材は640x427しかないため、ノイズ除去＋Lanczos拡大版を用意した。
   ※元素材に人物の顔は写っていない（腕に顔を伏せた構図）。
   --------------------------------------------------------------------- */
@media (min-width:768px){
  .section-3{
    background-image:
      linear-gradient(180deg,
        rgba(8,14,26,.40) 0%,
        rgba(8,14,26,.08) 34%,
        rgba(8,14,26,.66) 80%,
        rgba(8,14,26,.86) 100%),
      url(../img/section3-bg@2x.jpg) !important;
    background-position:center center, center 16% !important;
  }
}

/* ---------------------------------------------------------------------
   #9 必要なのは現場経験：左=テキスト／右=写真 を明確に分ける
   --------------------------------------------------------------------- */
@media (min-width:768px){
  .section-4{
    background-image:url(../img/section4-bg@2x.jpg) !important;
    background-size:auto 100% !important;
    background-position:right center !important;   /* 写真は右半分に固定 */
    background-repeat:no-repeat !important;
    min-height:460px;
    padding-top:48px !important;
    padding-bottom:48px !important;
  }
  .section-4 > .container{ max-width:1180px; }
  .section-4 .row{ align-items:center; }
  .section-4 .readable-bg{
    /* 写真へ被せない。左カラム内に収める */
    flex:0 0 48% !important;
    max-width:48% !important;
    margin-left:0 !important;
    margin-right:auto !important;
    background:rgba(255,255,255,.94) !important;
    padding:32px 32px !important;
    border-radius:14px;
    box-shadow:0 6px 24px rgba(0,0,0,.14);
  }
}
@media (min-width:1200px){
  .section-4 .readable-bg{ flex:0 0 44% !important; max-width:44% !important; }
}

/* ---------------------------------------------------------------------
   #10 公開・配信作品訴求：高精細版（PC）
   --------------------------------------------------------------------- */
@media (min-width:768px){
  .section-7 .head,
  .section-7-1 .head{
    background-image:
      linear-gradient(180deg, rgba(8,14,26,.62) 0%, rgba(8,14,26,.30) 45%, rgba(8,14,26,.80) 100%),
      url(../img/section7-bg@2x.jpg) !important;
  }
}

/* ---------------------------------------------------------------------
   #11 #12 「オーディションに合格したら」：縦幅短縮＋高精細版
   --------------------------------------------------------------------- */
@media (min-width:768px){
  .section-6 .head{
    background-image:url(../img/section6-bg@2x.jpg) !important;
    background-size:cover !important;
    background-position:center 38% !important;
    padding-top:48px !important;
    padding-bottom:48px !important;
    min-height:0 !important;
  }
  .section-6 .head .col-12{ text-align:center; }
  .section-6 .head h2{
    font-size:clamp(26px,3.2vw,38px) !important;
    line-height:1.3 !important;
    margin-bottom:4px !important;
  }
  .section-6 .head p{ margin-bottom:0 !important; }
}

/* ---------------------------------------------------------------------
   #13 出演可能案件：件数バッジ廃止（HTML側で削除済み）
   --------------------------------------------------------------------- */
.works-cat__count{ display:none !important; }
h4.works-cat__label{ justify-content:flex-start; }

/* ---------------------------------------------------------------------
   #14 〜 #17 定員セクション
   --------------------------------------------------------------------- */
/* #15 巨大な空白の原因（main.css の padding:7.5rem / .about の float・幅指定）を解除 */
.section-10{
  padding-top:32px !important;
  padding-bottom:32px !important;
  background-position:center center !important;
}
.section-10 .row{ justify-content:center; }

/* #14 「定員となり次第終了します。」を強く、ただし点滅や過度な赤は使わない */
.section-10 .attention{
  display:block;
  max-width:820px;
  margin:4px auto 12px !important;
  font-size:clamp(20px,2.4vw,30px) !important;
  font-weight:900 !important;
  line-height:1.5 !important;
  letter-spacing:.02em;
  color:#fff !important;
  text-align:center !important;
  text-shadow:0 2px 10px rgba(0,0,0,.55);
}

/* #16 #17 説明文・写真・特徴カードを中央基準に揃える */
.section-10 .about{
  float:none !important;
  width:100% !important;
  max-width:820px !important;
  margin:0 auto !important;
  padding:0 !important;
  text-align:center !important;
}
.section-10 .about p{
  margin:0 auto 12px !important;
  max-width:760px;
  font-size:clamp(14px,1.1vw,16px) !important;
  line-height:1.95 !important;
  text-align:center !important;
}
.section-10 .about img{
  display:block;
  margin:4px auto 0 !important;
  max-width:560px !important;
  width:100%;
  height:auto;
  border-radius:12px;
  box-shadow:0 6px 24px rgba(0,0,0,.3);
}
@media (min-width:768px){
  .section-10 .about + .about{ margin-top:4px !important; }
}

/* 定員セクション下の特徴カード：中心線とカード内の行位置を揃える */
.p2c-points{
  max-width:1040px;
  margin-left:auto !important;
  margin-right:auto !important;
}
/* アイコンの縦横比がばらばら(343x445 / 403x442 / 516x284)で見出し位置がずれるため、
   同じ高さの枠に収めて3枚の行位置を揃える */
.p2c-points .box .content{
  display:flex;
  flex-direction:column;
  align-items:center;
  height:100%;
}
.p2c-points .box .content img{
  height:84px !important;
  max-width:120px !important;
  width:auto !important;
  object-fit:contain;
  margin:4px auto 12px !important;
}
.p2c-points .box .content h3{ min-height:2.9em; display:flex; align-items:center; justify-content:center; }

/* 監督メッセージの見出しも中央へ */
.p2b-letter h3{ text-align:center !important; }
.p2b-letter .p2b-letter-points{ max-width:680px; margin-left:auto !important; margin-right:auto !important; }

/* ---------------------------------------------------------------------
   #18 問い合わせパネルの中央揃え
   --------------------------------------------------------------------- */
.p2c-note{
  display:flex !important;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
}
/* 「！」は文頭にインラインで置き、文章ごと中央に収める */
.p2c-note{ max-width:620px; }
.p2c-note .p2c-note-lead{
  display:block !important;
  width:100%;
  max-width:540px;
  margin:0 auto 12px !important;
  text-align:center !important;
  text-wrap:balance;
}
.p2c-note .p2c-note-mark{
  display:inline-grid !important;
  margin-right:8px !important;
  vertical-align:-4px !important;
}
.p2c-note .p2c-note-tel{ margin:0 auto; }

/* ---------------------------------------------------------------------
   #19 PC版 全体のセンタリング監査で見つかった中心線ズレの是正
   --------------------------------------------------------------------- */
@media (min-width:768px){
  /* Bootstrapのcol-*が親rowのgutterで片寄るのを防ぐ */
  .section-11 .content .row,
  .section-10 .row,
  .section-6 .content .row,
  .section-8 .row,
  .section-2 .row,
  .section-3 .row{ justify-content:center; }

  /* リボン見出し・セクション見出しは必ず中央 */
  .section-11 .content h3,
  .section-6 .content h3,
  .section-8 h2,
  .section-9 h2,
  .section-13 h2,
  .section-12 h2{ margin-left:auto !important; margin-right:auto !important; text-align:center !important; }

  /* リード文・注記・開閉ボタン・CTAの中心線 */
  .p2b-lead,
  .p2b-flow-note,
  .p2c-more,
  .p2b-faq-more,
  .p2b-status,
  .p2c-note,
  .p2b-letter,
  .p2c-pick{ margin-left:auto !important; margin-right:auto !important; }

  /* CTAブロックは col-md-6 の左寄りを解除して中央へ */
  .entry .btn-box,
  #form .btn-box{
    float:none !important;
    margin-left:auto !important;
    margin-right:auto !important;
  }

  /* 出演作品カードは2枚を中央寄せで均等に */
  .section-8 .row{ align-items:stretch; }
  .section-8 .box{ margin-left:1% !important; margin-right:1% !important; }
}

/* ---------------------------------------------------------------------
   モーション：Phase2Cの設定を維持（レイアウト変更で壊れていないこと）
   --------------------------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  .section-11 .content::before{ transition:none !important; }
}