@charset "UTF-8";
/* =====================================================================
   Phase 2F — LP全体の共通ルール層（spacing / 幅 / 配色）
   これまでの個別調整を少数の共通ルールへ集約する。最後に読み込む。
   元LPのトーン（濃紺ベース＋オレンジCTA＋白文字）は変えない。
   ===================================================================== */

:root{
  /* ---- spacing scale（この9段階以外は使わない） ---- */
  --ds-1:4px;    /* 最小：アイコンと文字など */
  --ds-2:8px;    /* タグ/チップ同士、ラベルと値 */
  --ds-3:12px;   /* 見出しと本文 */
  --ds-4:16px;   /* 関連要素間・左右ガター */
  --ds-5:24px;   /* カード内部・小ブロック間 */
  --ds-6:32px;   /* ブロック間 */
  --ds-7:48px;   /* セクション上下(SP) */
  --ds-8:64px;   /* セクション上下(PC) */
  --ds-9:80px;   /* 大きな区切り */

  /* ---- 幅のルール ---- */
  --ds-container:1140px;   /* セクションの中央コンテナ */
  --ds-block:860px;        /* 一覧・カード帯などのブロック */
  --ds-text:720px;         /* 読ませる文章 */
  --ds-form:640px;         /* フォーム・注記 */
  --ds-gutter:var(--ds-4);

  /* ---- 配色（元LPの色だけで構成する） ---- */
  --ds-navy-900:#0d1c33;   /* ベース背景 */
  --ds-navy-700:#05326e;   /* 見出し帯・サブボタン */
  --ds-navy-500:#16325c;
  --ds-orange:#ff7a1a;     /* 応募CTA専用 */
  --ds-orange-dark:#e8590c;
  --ds-white:#fff;
  --ds-ink:#1b2430;        /* 明るい背景の本文 */
  --ds-muted:#5b6673;      /* 補足文 */
  --ds-line:#dde3ea;       /* 罫線 */
  --ds-surface:#f3f6f9;    /* 明るい面 */
  --ds-alert:#8e1b1b;      /* 必須・注意（元LPの赤系） */
  --ds-on-dark-soft:rgba(255,255,255,.72);  /* 濃紺上の補足文 */
  --ds-border-dark:rgba(255,255,255,.30);   /* 濃紺上の罫線 */

  /* 既存変数を新パレットへ寄せる（金色の面積を減らす） */
  --p2b-gold:rgba(255,255,255,.55);
  --p2c-accent:var(--ds-white);
  --p2c-accent-ink:var(--ds-navy-900);
}

/* =====================================================================
   1. 左右ガターの統一
   ===================================================================== */
.container{
  width:100%;
  max-width:var(--ds-container);
  margin-inline:auto;
  padding-left:var(--ds-gutter);
  padding-right:var(--ds-gutter);
}
/* 親子でmarginが二重に効かないよう、Bootstrapの行の負マージンを打ち消す */
.container > .row{ margin-left:0; margin-right:0; }
.container > .row > [class*="col-"]{ padding-left:0; padding-right:0; }

/* =====================================================================
   2. セクション上下余白のリズム（SP 48 / PC 64）
      背景を見せる意図のヒーロー（section-3/4、各.head）は対象外
   ===================================================================== */
.section-2,
.section-8,
.section-9,
.section-10,
.section-12,
.section-13,
.section-11 .content,
.section-6 .content,
.section-7 .content,
.section-7-1 .content,
section.entry{
  padding-top:var(--ds-7) !important;
  padding-bottom:var(--ds-7) !important;
}
@media (min-width:768px){
  .section-2,
  .section-8,
  .section-9,
  .section-10,
  .section-12,
  .section-13,
  .section-11 .content,
  .section-6 .content,
  .section-7 .content,
  .section-7-1 .content,
  section.entry{
    padding-top:var(--ds-8) !important;
    padding-bottom:var(--ds-8) !important;
  }
}
/* 「必要なのは現場経験」も内容セクションなので同じリズムに乗せる */
.section-4{ padding-top:var(--ds-7) !important; padding-bottom:var(--ds-7) !important; }
@media (min-width:768px){
  .section-4{ padding-top:var(--ds-8) !important; padding-bottom:var(--ds-8) !important; }
}

/* ヒーロー（背景写真を見せる帯）は専用の2値だけを使う */
.section-7 .head,
.section-7-1 .head,
.section-6 .head{
  padding-top:var(--ds-7) !important;
  padding-bottom:var(--ds-7) !important;
}
.section-3{
  padding-top:calc(var(--ds-8) + var(--ds-7)) !important;  /* 112px：写真を見せる */
  padding-bottom:var(--ds-6) !important;
}
@media (min-width:768px){
  .section-3{
    padding-top:calc(var(--ds-9) * 2) !important;          /* 160px */
    padding-bottom:var(--ds-7) !important;
  }
}

/* セクション同士の距離は section 側だけで作る */
section, .really{ margin-top:0 !important; margin-bottom:0 !important; }

/* =====================================================================
   3. 見出し → コンテンツ のリズム
   ===================================================================== */
.section-8 h2,
.section-9 h2,
.section-12 h2,
.section-13 h2,
.section-11 .content h3,
.section-6 .content h3{
  margin-top:0 !important;
  margin-bottom:var(--ds-5) !important;
}
.p2b-lead,
.section-11 .p2b-lead,
.section-6 .p2b-lead{
  width:100%;
  max-width:var(--ds-text) !important;
  margin:0 auto var(--ds-5) !important;
}

/* =====================================================================
   4. 同じ役割のブロックは同じ幅・同じ内側余白に揃える
   ===================================================================== */
/* 同じ縦列に積むブロックは左右のエッジを完全に揃える */
.p2c-pick,
.p2c-stat,
.section-11 ul.left,
.p2b-steps,
.works-chips,
.p2b-disclosure{
  width:100%;
  max-width:var(--ds-block) !important;
  margin-left:auto !important;
  margin-right:auto !important;
}
.p2b-letter{ max-width:var(--ds-text); }
#form #formWrap,
#form .btn-box,
.p2c-note{ max-width:var(--ds-form) !important; }
.p2c-points{ max-width:1040px; }

/* カード内部は padding、カード同士は gap で揃える */
.works-chips{ gap:var(--ds-4); }
.works-cat__list{ gap:var(--ds-2); padding:var(--ds-4) !important; }
.p2c-pick{ gap:var(--ds-2); padding:0 !important; }
.p2c-points{ gap:var(--ds-4); }
.p2c-points .box .content{ padding:var(--ds-5) !important; }
.section-8 .box{ margin-bottom:var(--ds-4); }
.p2b-steps{ gap:var(--ds-3); }
.p2b-steps li{ padding:var(--ds-4); }
.section-3 ul{ gap:var(--ds-2); }
.p2b-chips{ gap:var(--ds-2); }

/* =====================================================================
   5. 「5ジャンル 54作品・案件」〜 代表タグ の上下余白（#3）
   ===================================================================== */
.p2c-stat{
  margin-top:var(--ds-5) !important;
  margin-bottom:var(--ds-5) !important;
  padding:var(--ds-4) var(--ds-5) !important;
}
.p2c-pick{ margin-top:var(--ds-5) !important; margin-bottom:var(--ds-5) !important; }
.section-11 ul.left{ margin-top:0 !important; padding:var(--ds-5) !important; }
.section-11 .p2c-list-rest{ margin-top:var(--ds-4) !important; }
.section-11 .p2c-disclosure{ margin-top:var(--ds-5) !important; }

/* =====================================================================
   6. CTA 前後の余白を統一
   ===================================================================== */
.entry .btn-box,
#form .btn-box{
  margin-top:var(--ds-5) !important;
  margin-bottom:0 !important;
}
.p2b-formlead{ margin-bottom:0 !important; }
.p2c-more,
.p2b-faq-more{ margin-top:var(--ds-5) !important; margin-bottom:0 !important; }
.p2c-note{ margin-top:var(--ds-6) !important; }

/* =====================================================================
   7. 配色の整理
      オレンジは「応募CTA」専用。装飾・番号・アクセントは紺か白に寄せる。
   ===================================================================== */

/* FVの4タグ：補助情報なので白文字・白の細枠（#10） */
.p2b-chips li{
  background:rgba(255,255,255,.12) !important;
  border:1px solid var(--ds-border-dark) !important;
  color:var(--ds-white) !important;
}
.p2b-fv .p2b-cta-note{ color:var(--ds-on-dark-soft) !important; }

/* 濃紺上の小見出し・ラベルは白 */
.p2b-talent h2.p2b-talent-label,
.p2b-talent .p2b-talent-label{
  background:linear-gradient(180deg,var(--ds-navy-500),var(--ds-navy-900)) !important;
  border-color:var(--ds-border-dark) !important;
  color:var(--ds-white) !important;
}
.p2b-eyebrow{ color:var(--ds-white) !important; }
.p2b-disclosure{ border-color:var(--ds-border-dark) !important; }
.p2b-disclosure > summary{ color:var(--ds-white) !important; }
.p2b-count{ background:var(--ds-white) !important; color:var(--ds-navy-900) !important; }
.p2b-disclosure--light > summary{ color:var(--ds-navy-700) !important; }
.section-8 .p2b-nolink{ color:var(--ds-on-dark-soft) !important; }

/* 実績の数字・定員訴求は「白＋太さ」で強調する（金色をやめる） */
.p2c-stat{ border-color:var(--ds-border-dark) !important; }
.p2c-stat-num{ color:var(--ds-white) !important; }
.p2c-stat-unit{ color:var(--ds-on-dark-soft) !important; }
.section-10 .attention{ color:var(--ds-white) !important; }

/* 開閉ボタン：白地＋紺文字のサブアクション（CTAと役割を分ける） */
.section-11 .p2c-more:hover{
  background:var(--ds-white) !important;
  color:var(--ds-navy-700) !important;
  border-color:var(--ds-white) !important;
}
.p2c-more,
.p2b-faq-more{ border-color:var(--ds-navy-700) !important; color:var(--ds-navy-700) !important; }
.p2c-more:focus-visible,
.p2b-faq-more:focus-visible,
.p2c-official:focus-visible,
.p2b-cta:focus-visible,
a.btn-block:focus-visible,
#form .submitbtn:focus-visible,
.p2c-note .p2c-note-tel:focus-visible{ outline-color:var(--ds-white) !important; }
#form table.formTable input:focus-visible,
#form table.formTable textarea:focus-visible{ outline-color:var(--ds-navy-700) !important; }

/* 番号バッジ・装飾はオレンジをやめて紺に（CTAの優先度を落とさない） */
.p2b-steps li::before,
.section-10 .point.p2c-points .box::before{
  background:var(--ds-navy-700) !important;
  color:var(--ds-white) !important;
}
.p2b-flow .p2b-flow-no{ background:var(--ds-navy-700) !important; }
.p2b-flow li::before{ background:var(--ds-border-dark) !important; }
.section-3 ul li{ border-left-color:var(--ds-navy-700) !important; }
.p2b-status{ border-left-color:var(--ds-navy-700) !important; }
.section-11 ul.left li.p2c-cat{ border-left-color:var(--ds-navy-700) !important; }

/* 「入力1分」は紺＋下線。オレンジはCTAに残す */
.p2b-formlead .p2b-formlead-head em,
.p2b-formlead .p2c-mark{
  color:var(--ds-navy-700) !important;
  border-bottom-color:rgba(5,50,110,.35) !important;
}

/* 赤系は1色に統一（必須バッジ・問い合わせ注記） */
#form .spantxt,
.p2c-note{ background:var(--ds-alert) !important; }
#form .spantxt2{ background:var(--ds-muted) !important; }
.p2c-note .p2c-note-mark{ color:var(--ds-alert) !important; }
.p2c-note .p2c-note-tel{ color:var(--ds-alert) !important; }

/* 明るい面の文字・罫線 */
.section-8 .box{ border-color:var(--ds-line) !important; }
.section-8 .box p{ color:var(--ds-muted) !important; }
.works-cat__list li{ background:var(--ds-surface) !important; border-color:var(--ds-line) !important; color:var(--ds-ink) !important; }
.works-cat__list li.etc{ background:transparent !important; color:var(--ds-muted) !important; }
/* タグ帯は「面」ではなくチップの集合。意図しない白背景を消す */
.p2c-pick{ background:transparent !important; border:0 !important; }
.p2c-pick li{ border-color:var(--ds-line) !important; color:var(--ds-ink) !important; }
.p2c-points .box .content p{ color:var(--ds-muted) !important; }
.p2b-steps .p2b-steps-d{ color:var(--ds-muted) !important; }
.p2c-letter > p,
.p2c-letter .p2c-more-body p{ color:var(--ds-white) !important; }

/* 応募CTAだけがオレンジ */
.p2b-cta,
a.btn-block,
#form .submitbtn{
  background-image:linear-gradient(180deg,#ff9a3c 0%,var(--ds-orange) 55%,var(--ds-orange-dark) 100%) !important;
}

/* =====================================================================
   8. SPのリズム（左右ガターをセクション間で変えない）
   ===================================================================== */
@media (max-width:767.98px){
  .section-2,
  .section-16,
  .p2b-fv,
  .p2b-talent{
    padding-left:var(--ds-gutter) !important;
    padding-right:var(--ds-gutter) !important;
  }
  .section-11 ul.left{ padding:var(--ds-4) !important; }
  .p2c-points .box .content{ padding:var(--ds-4) !important; }
  .p2b-steps li{ padding:var(--ds-3); }
  .p2c-stat{ padding:var(--ds-3) var(--ds-4) !important; }

  /* Bootstrapの col-11 / col-10 ml-auto mr-0 で左右余白がずれる2箇所を揃える */
  .section-3 .readable-bg,
  .section-4 .readable-bg{
    flex:0 0 100% !important;
    width:100% !important;
    max-width:100% !important;
    margin-left:0 !important;
    margin-right:0 !important;
  }
}

/* =====================================================================
   9. 追加修正3点（色数は増やさず既存パレットの範囲で対応）
   ===================================================================== */

/* ---- 9-1. 問い合わせ・キャンセルは「補足情報」のトーンへ ------------
   応募CTA(オレンジ)が最優先。赤パネルをやめ、罫線付きの注記にする。
   tel: リンク・文言・可読性は維持する。 */
.p2c-note{
  max-width:var(--ds-form) !important;
  margin:var(--ds-6) auto 0 !important;
  padding:var(--ds-4) 0 0 !important;
  background:none !important;
  border:0 !important;
  border-top:1px solid var(--ds-line) !important;
  border-radius:0 !important;
  box-shadow:none !important;
  text-align:center;
}
.p2c-note .p2c-note-mark{ display:none !important; }   /* 注意喚起の「!」は不要 */
.p2c-note .p2c-note-lead{
  margin:0 auto var(--ds-2) !important;
  color:var(--ds-muted) !important;
  font-size:13px !important;
  font-weight:500 !important;
  line-height:1.8 !important;
  text-shadow:none !important;
}
.p2c-note .p2c-note-tel{
  display:inline-flex !important;
  align-items:center;
  gap:var(--ds-2);
  min-height:44px;                       /* タップ領域は確保する */
  margin:0 auto !important;
  padding:var(--ds-2) var(--ds-3) !important;
  background:none !important;
  border-radius:var(--p2b-radius) !important;
  color:var(--ds-navy-700) !important;
  font-size:17px !important;
  font-weight:700 !important;
  letter-spacing:.02em !important;
  text-decoration:underline !important;
  text-underline-offset:3px;
  box-shadow:none !important;
}
.p2c-note .p2c-note-tel:hover{
  background:var(--ds-surface) !important;
  transform:none !important;
  box-shadow:none !important;
}
.p2c-note .p2c-note-tel-icon{
  width:14px; height:14px;
  border-width:2px !important;
  opacity:.75;
}

/* ---- 9-2. フッターの記事リンクに「リンク」だと分かる手がかりを ------- */
.footer__link-wrap{
  display:flex;
  flex-direction:column;
  gap:var(--ds-1);
  width:100%;
  max-width:440px;                       /* 既存フッターボタンと同じ列幅に揃える */
  margin:var(--ds-2) auto var(--ds-4) !important;
  padding:0 var(--ds-4);
}
.footer__link-wrap .footer__link{
  display:flex !important;
  align-items:flex-start;
  gap:var(--ds-2);
  min-height:44px;                       /* SPでもタップできる高さ */
  padding:var(--ds-2) var(--ds-3) !important;
  border-radius:var(--p2b-radius);
  color:#fff !important;
  font-size:14px;
  line-height:1.6;
  text-align:left;
  text-decoration:none !important;
  cursor:pointer;
  transition:background var(--p2c-dur-fast,160ms) var(--p2c-ease,ease),
             color var(--p2c-dur-fast,160ms) var(--p2c-ease,ease);
}
.footer__link-wrap .footer__link::before{
  content:"";
  flex:0 0 auto;
  width:6px; height:6px;
  margin-top:.45em;                      /* 2行になっても1行目に揃える */
  border-right:2px solid currentColor;
  border-top:2px solid currentColor;
  transform:rotate(45deg);
  opacity:.8;
}
.footer__link-wrap .footer__link:hover,
.footer__link-wrap .footer__link:focus-visible{
  background:rgba(255,255,255,.1);
  text-decoration:underline !important;
  text-underline-offset:3px;
}
.footer__link-wrap .footer__link:focus-visible{ outline:2px solid #fff; outline-offset:2px; }

/* ---- 9-3. SPのメインビジュアル上部コピーを2行に固定 ----------------- */
h1.text-center .p2g-h1-l1,
h1.text-center .p2g-h1-l2{ display:inline; }
/* PCは1行。句点を外したので全角スペースで区切る（文言は変えない） */
@media (min-width:768px){
  h1.text-center .p2g-h1-l1::after{ content:"　"; }
}
@media (max-width:767.98px){
  h1.text-center{
    font-size:clamp(17px,5.1vw,24px) !important; /* 2行目が1行に収まる範囲で最大化 */
    line-height:1.5 !important;
  }
  h1.text-center .p2g-h1-l1,
  h1.text-center .p2g-h1-l2{
    display:block;
    white-space:nowrap;                            /* 途中で折り返さない */
  }
}

/* =====================================================================
   10. 最終調整（開閉ボタンの配色バグ / 余白の圧縮 / CTA中央 / 見出し / 問い合わせ）
   ===================================================================== */

/* ---- 10-1. 開閉ボタン：どの状態でも背景と文字が同化しないようにする ----
   原因: 上の「色の整理」で color を !important にしたため、
   phase2c の :hover(白文字) が負けて 紺地×紺文字 になっていた。
   通常=白地×紺文字 / hover・focus・active=紺地×白文字 で統一する。 */
.p2c-more,
.p2b-faq-more,
.p2c-more:link,
.p2c-more:visited{
  background:var(--ds-white) !important;
  color:var(--ds-navy-700) !important;
  border-color:var(--ds-navy-700) !important;
  -webkit-text-fill-color:var(--ds-navy-700);   /* iOS Safari の塗り潰し対策 */
}
.p2c-more:hover,
.p2c-more:focus,
.p2c-more:focus-visible,
.p2c-more:active,
.p2b-faq-more:hover,
.p2b-faq-more:focus,
.p2b-faq-more:focus-visible,
.p2b-faq-more:active,
.p2c-more[aria-expanded="true"]:hover,
.p2c-more[aria-expanded="true"]:focus{
  background:var(--ds-navy-700) !important;
  color:var(--ds-white) !important;
  border-color:var(--ds-navy-700) !important;
  -webkit-text-fill-color:var(--ds-white);
}
/* 矢印も currentColor に追随させる */
.p2c-more::after{ border-color:currentColor !important; }
.p2c-more:focus-visible,
.p2b-faq-more:focus-visible{ outline:3px solid var(--ds-orange) !important; outline-offset:3px; }
/* 濃紺背景のセクションでも同じ規則にする（phase2c/2d の個別指定を打ち消す） */
.section-11 .p2c-more:hover,
.section-11 .p2c-more:focus,
.section-11 .p2c-more:active{
  background:var(--ds-navy-700) !important;
  color:var(--ds-white) !important;
  border-color:var(--ds-white) !important;
  -webkit-text-fill-color:var(--ds-white);
}

/* ---- 10-2. 縦方向の余白を1段階コンパクトに（規則性は維持） ---------- */
.section-2,
.section-8,
.section-9,
.section-10,
.section-12,
.section-13,
.section-11 .content,
.section-6 .content,
.section-7 .content,
.section-7-1 .content,
.section-4,
section.entry{
  padding-top:var(--ds-6) !important;      /* 48 → 32 */
  padding-bottom:var(--ds-6) !important;
}
@media (min-width:768px){
  .section-2,
  .section-8,
  .section-9,
  .section-10,
  .section-12,
  .section-13,
  .section-11 .content,
  .section-6 .content,
  .section-7 .content,
  .section-7-1 .content,
  .section-4,
  section.entry{
    padding-top:var(--ds-7) !important;    /* 64 → 48 */
    padding-bottom:var(--ds-7) !important;
  }
}
.section-7 .head,
.section-7-1 .head,
.section-6 .head{
  padding-top:var(--ds-6) !important;      /* 48 → 32 */
  padding-bottom:var(--ds-6) !important;
}
.section-3{
  padding-top:var(--ds-9) !important;      /* 112 → 80 */
  padding-bottom:var(--ds-5) !important;
}
@media (min-width:768px){
  .section-3{
    padding-top:calc(var(--ds-8) + var(--ds-7)) !important;  /* 160 → 112 */
    padding-bottom:var(--ds-6) !important;
  }
}

/* 見出し→本文、本文→CTA、カード・開閉UIの前後も1段階詰める */
.section-8 h2,
.section-9 h2,
.section-12 h2,
.section-13 h2,
.section-11 .content h3,
.section-6 .content h3{ margin-bottom:var(--ds-4) !important; }   /* 24 → 16 */
.p2b-lead,
.section-11 .p2b-lead,
.section-6 .p2b-lead{ margin-bottom:var(--ds-4) !important; }
.p2c-stat{ margin-top:var(--ds-4) !important; margin-bottom:var(--ds-4) !important; }
.p2c-pick{ margin-top:var(--ds-4) !important; margin-bottom:var(--ds-4) !important; }
.section-11 .p2c-disclosure{ margin-top:var(--ds-4) !important; }
.entry .btn-box,
#form .btn-box{ margin-top:var(--ds-4) !important; }
.p2c-more,
.p2b-faq-more{ margin-top:var(--ds-4) !important; }
.p2b-steps{ margin-bottom:var(--ds-4) !important; }
.section-10 .about img{ margin-top:var(--ds-3) !important; }
.p2c-points{ margin-top:var(--ds-4) !important; }
.p2b-letter{ padding-top:0 !important; }
.p2b-status{ margin-bottom:var(--ds-3) !important; }
.section-10 .attention{ margin-bottom:var(--ds-3) !important; }
#form table.formTable{ margin-bottom:0 !important; }
#form table.formTable tr{ margin-bottom:var(--ds-3); }   /* 18 → 12 */
.really p{ padding:var(--ds-6) 0 !important; }           /* 72 → 32 */
@media (min-width:768px){
  .really p{ padding:var(--ds-7) 0 !important; }
}
.section-16{ padding:var(--ds-5) var(--ds-4) var(--ds-4) !important; }
footer.footer{ padding-top:var(--ds-6) !important; }

/* ---- 10-3. 応募CTAを正確に中央へ -------------------------------- */
.entry .btn-box,
#form .btn-box,
.p2b-fv .p2b-cta,
.ma-sticky-cta a.btn-block{
  float:none !important;
  margin-left:auto !important;
  margin-right:auto !important;
  padding-left:0 !important;
  padding-right:0 !important;
  transform:none;
}
.entry .btn-box{ width:100% !important; max-width:480px !important; }
.p2b-cta,
a.btn-block,
#form .submitbtn{ margin-left:auto !important; margin-right:auto !important; }
/* CTA内の矢印ぶんだけ左右paddingが非対称でラベルが左へずれて見えるのを補正 */
.p2b-cta,
a.btn-block{ padding-left:48px !important; padding-right:48px !important; }

/* ---- 10-4. 「一流芸能人も初めは未経験者。」を見出しとして強調 -------- */
.p2h-lead-head{ margin-bottom:0 !important; }
.p2h-lead-head .p2c-lead-strong{ margin-bottom:var(--ds-1); }

/* ---- 10-5. 問い合わせ・キャンセルをさらにコンパクトに --------------- */
.p2c-note{
  margin-top:var(--ds-4) !important;        /* CTAとの距離を詰める */
  padding:var(--ds-3) 0 0 !important;
}
.p2c-note .p2c-note-lead{
  margin:0 auto var(--ds-1) !important;     /* 説明文→電話番号のgapを縮小 */
  font-size:12px !important;
}
.p2c-note .p2c-note-tel{
  min-height:44px;                          /* タップ領域は維持 */
  padding:var(--ds-1) var(--ds-3) !important;
  font-size:15px !important;
}
.p2c-note .p2c-note-tel-icon{ width:12px; height:12px; }
#form .wrap_block{ padding-bottom:0 !important; }

/* =====================================================================
   11. FLOW「オーディションの流れ」のレイアウト調整
       数字アイコンを各STEPの真上中央へ置き、1STEPを1つのまとまりとして
       中央に積む。色・アイコン意匠・文章・STEP内容は変更しない。
   ===================================================================== */
.p2b-flow{
  display:grid;
  justify-items:center;                 /* 3項目全体を中央寄せ */
  max-width:var(--ds-block) !important;
  margin-left:auto !important;
  margin-right:auto !important;
}
.p2b-flow li{
  display:flex !important;              /* 2カラム(56px 1fr)をやめて縦積みに */
  flex-direction:column;
  align-items:center;                   /* 数字・見出し・本文の中心軸を揃える */
  gap:var(--ds-2) !important;           /* 数字と本文の距離を詰める */
  width:100%;
  max-width:520px;
  padding-bottom:var(--ds-5) !important;/* STEP間を均等に */
  text-align:center;
}
.p2b-flow li:last-child{ padding-bottom:0 !important; }

/* 接続線は本文カードを貫かないよう、STEP間の余白だけに引く */
.p2b-flow li::before{
  left:50% !important;
  top:auto !important;
  bottom:0 !important;
  height:var(--ds-5);
  transform:translateX(-50%);
}

.p2b-flow .p2b-flow-no{
  flex:0 0 auto;                        /* 円のサイズ・配色はそのまま */
  margin:0 auto;
}
.p2b-flow .p2b-flow-body{
  width:100%;
  text-align:center;
}
.p2b-flow .p2b-flow-t,
.p2b-flow .p2b-flow-d{ text-align:center; }

/* STEP間の接続線：数字アイコンの中心軸上に、紺系の控えめな点線でつなぐ。
   本文カードは貫通させず、STEP間の余白(24px)だけに引く。 */
.p2b-flow li::before{
  width:2px !important;                                   /* 線幅は控えめに */
  background:repeating-linear-gradient(
    180deg,
    rgba(5,50,110,.32) 0 4px,
    transparent 4px 9px) !important;                      /* 紺系・薄め・間隔も控えめ */
  border-radius:1px;
  opacity:1;
}

/* =====================================================================
   12. iOS Safari の電話番号自動リンクへの対策
   ---------------------------------------------------------------------
   iOS Safari は平文の電話番号を <a href="tel:..."> へ自動変換する
   （Apple の data detectors。x-apple-data-detectors 属性が付く）。
   section.entry 内には main.css の `.entry a` があり、
   赤いグラデーション・白文字・font-size 2.2rem・padding 1.5rem の
   「ボタン装飾」を a 要素すべてに当てている。
   自動変換された電話リンクはクラスを持たないためこの装飾を受け、
   さらに display が inline のままなので縦 padding が行ボックスに
   反映されず、背景が上下へはみ出して応募CTA・本文に重なる。
   横向き（幅 >= 48em）では main.css の分岐で font-size 3rem /
   padding 2.25rem となり、重なりがさらに拡大する。
   意図したCTA（.btn-block 等）には触れず、tel: の自動リンクだけを
   本文テキストの見た目へ戻す。タップで発信できる機能は維持する。
   ===================================================================== */
.entry a[href^="tel:"]:not(.btn-block):not(.p2b-cta):not(.p2c-note-tel),
.entry a[x-apple-data-detectors]:not(.btn-block):not(.p2b-cta):not(.p2c-note-tel){
  display:inline !important;
  padding:0 !important;
  margin:0 !important;
  background:none !important;
  border:0 !important;
  border-radius:0 !important;
  box-shadow:none !important;
  color:inherit !important;
  font-size:inherit !important;
  font-weight:inherit !important;
  line-height:inherit !important;
  text-decoration:underline;
  text-underline-offset:2px;
}

/* =====================================================================
   13. 問い合わせ欄の電話アイコンを ICOOON MONO の受話器素材に差し替える
   ---------------------------------------------------------------------
   従来は空の <span> に border と border-radius だけを当てて受話器を表現していた
   （phase2c.css:633 で 17px / border 2.5px / radius 4px 4px 7px 7px）。
   phase2f で 14px → 12px へ縮小した結果、角丸が枠のほぼ全体を占めて
   「○のような記号」に見える状態になっていた。
   正本: ICOOON MONO「電話の受話器のアイコン素材」
         https://icooon-mono.com/00027-電話の受話器のアイコン素材/
   取得したSVGを img/icon-tel.svg としてローカルに保存して参照する
   （外部サイトへの実行時依存なし・アイコンフォント等の追加ライブラリなし）。
   色はSVG内で --ds-navy-700 と同じ #05326e に揃えてある。
   HTML・tel: リンク・電話番号の文字列は一切変更しない。
   ===================================================================== */
.p2c-note .p2c-note-tel-icon{
  width:18px !important;
  height:18px !important;
  flex:none;
  border:0 !important;
  border-radius:0 !important;
  opacity:1 !important;
  background-image:url(../img/icon-tel.svg) !important;
  background-repeat:no-repeat;
  background-position:center;
  background-size:contain;
}