@charset "UTF-8";

/* ----------------------------------------------------------------------
   audition.css  オーディションページ（/audition/）
   ----------------------------------------------------------------------
   1. p-audition-lead  リード文＋写真
   2. p-support        教育・サポート体制
   3. p-instructors    講師陣
   4. p-overview       募集要項
   5. p-faq            よくあるご質問（アコーディオン）
   6. p-cta            ページ末尾のオーディション応募バナー

   ヘッダー・フッター・ページタイトル部・中見出し（c-subhead）・
   定義リスト（c-deflist）・講師カード（c-talent）・
   ポップアップ（c-talent-modal）は common.css
   各コンポーネントの直後に、そのコンポーネントのレスポンシブ指定を置く
   ---------------------------------------------------------------------- */

/* ==========================================================================
   p-audition-lead  リード文＋写真
   ========================================================================== */

.p-audition-lead {
  padding: 8rem 0 11rem;
}

.p-audition-lead__inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3rem;
}

.p-audition-lead__text {
  font-size: 2rem;
  font-weight: 500;
  line-height: 1.8;
  color: #333;
}

/* 幅が縮んでも比率を保つ（Figma 1200 × 360）。
   height は auto にしないと、img要素のheight属性が優先されて aspect-ratio が効かない */
.p-audition-lead__img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 10 / 3;
  object-fit: cover;
}

@media (max-width: 1023px) {
  /* ----- p-audition-lead ----- */
  .p-audition-lead {
    padding: 6rem 0 8rem;
  }

  .p-audition-lead__text {
    font-size: 1.8rem;
  }
}

@media (max-width: 767px) {
  .p-audition-lead {
    padding: 4rem 0 6rem;
  }

  .p-audition-lead__inner {
    gap: 2rem;
  }

  .p-audition-lead__text {
    font-size: 1.5rem;
  }

  .p-audition-lead__img {
    aspect-ratio: 3 / 2;
  }
}

/* ==========================================================================
   p-support  教育・サポート体制
   ========================================================================== */

.p-support {
  padding-bottom: 8rem;
}

.p-support__inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4rem;
}

.p-support__lead {
  font-size: 1.6rem;
  font-weight: 500;
  line-height: 1.8;
  color: #333;
}

.p-support__list {
  display: flex;
  gap: 1.4rem;
  width: 100%;
}

.p-support__item {
  position: relative;
  box-sizing: border-box;
  display: flex;
  flex: 1 1 0;
  align-items: center;
  justify-content: center;
  min-width: 0;
  min-height: 22rem;
  padding: 2rem;
  background-color: #f6741b;
}

/* 連番は白の輪郭だけ（塗りなし）。カードの左上に半分かかる位置に置く */
.p-support__num {
  position: absolute;
  top: 1.1rem;
  left: -.6rem;
  font-family: "Barlow", sans-serif;
  font-size: 6.6rem;
  font-weight: 600;
  line-height: 2rem;
  color: transparent;
  -webkit-text-stroke: 1px #fff;
}

.p-support__text {
  position: relative;
  font-size: 2rem;
  font-weight: 500;
  line-height: 1.6;
  text-align: center;
  color: #fff;
}

@media (max-width: 1023px) {
  /* ----- p-support ----- */
  /* 5枚横並びだと1枚あたりが狭く文字が細かく折り返すため、3枚＋2枚に折り返す。
     カードの大きさを揃えたいので伸縮させず、あまった行は中央に寄せる */
  .p-support__list {
    flex-wrap: wrap;
    justify-content: center;
  }

  .p-support__item {
    flex: 0 0 calc((100% - 2.8rem) / 3);
    min-height: 20rem;
  }

  .p-support__text {
    font-size: 1.8rem;
  }
}

@media (max-width: 767px) {
  .p-support {
    padding-bottom: 6rem;
  }

  .p-support__inner {
    gap: 3rem;
  }

  .p-support__lead {
    font-size: 1.4rem;
  }

  .p-support__list {
    gap: 1rem;
  }

  /* SPは2枚ずつ */
  .p-support__item {
    flex: 0 0 calc((100% - 1rem) / 2);
    min-height: 16rem;
    padding: 1.6rem;
  }

  .p-support__num {
    top: .8rem;
    font-size: 4.6rem;
  }

  .p-support__text {
    font-size: 1.5rem;
  }
}

/* ==========================================================================
   p-instructors  講師陣
   ==========================================================================
   カードとポップアップは c-talent / c-talent-modal（common.css）を使う */

.p-instructors {
  padding: 10rem 0;
  background-color: #f2f2f2;
}

.p-instructors__inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4rem;
}

.p-instructors__lead {
  font-size: 1.6rem;
  font-weight: 500;
  line-height: 1.8;
  color: #333;
}

/* 写真が未支給の講師は、デザインどおりグレーの枠だけを出す */
/* カード内では span で出しているため display を明示する（高さ100%を効かせるため） */
.p-instructors__no-photo {
  display: block;
  width: 100%;
  height: 100%;
  background-color: #d9d9d9;
}

@media (max-width: 1023px) {
  /* ----- p-instructors ----- */
  .p-instructors {
    padding: 8rem 0;
  }
}

@media (max-width: 767px) {
  .p-instructors {
    padding: 6rem 0;
  }

  .p-instructors__inner {
    gap: 3rem;
  }

  .p-instructors__lead {
    font-size: 1.4rem;
  }
}

/* ==========================================================================
   p-overview  募集要項
   ==========================================================================
   2カラムの中身は c-deflist（common.css）を使う */

.p-overview {
  padding: 10rem 0;
}

@media (max-width: 1023px) {
  /* ----- p-overview ----- */
  .p-overview {
    padding: 8rem 0;
  }
}

@media (max-width: 767px) {
  .p-overview {
    padding: 6rem 0;
  }
}

/* ==========================================================================
   p-faq  よくあるご質問
   ========================================================================== */

.p-faq {
  padding: 10rem 0;
  background-color: #f2f2f2;
}

.p-faq__list {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  margin-top: 6.4rem;
}

.p-faq__item {
  background-color: #fff;
}

/* 質問の行全体がボタン。右端の＋／−で開閉する */
.p-faq__q {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  width: 100%;
  padding: 3.4rem 4rem 2.8rem;
  background: none;
  border: none;
  text-align: left;
  cursor: pointer;
}

/* 開いているときは、答えとの間隔をデザインどおり19pxにする */
.p-faq__item.is-open .p-faq__q {
  padding-bottom: 1.9rem;
}

.p-faq__q-body {
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

.p-faq__q-text {
  font-size: 2.2rem;
  font-weight: 500;
  line-height: 1.1818; /* Figma 26px / 22px */
  color: #333;
}

/* Q・A の丸バッジ。QはオレンジのベタでAは白地オレンジ枠 */
.p-faq__badge {
  box-sizing: border-box;
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 3.8679rem;
  height: 3.8679rem;
  border-radius: 50%;
  background-color: #f6741b;
  font-family: "Barlow", sans-serif;
  font-size: 2.4rem;
  font-weight: 500;
  line-height: 1;
  color: #fff;
}

.p-faq__badge--a {
  border: 1px solid #f6741b;
  background-color: #fff;
  color: #f6741b;
}

/* ＋／−アイコン。開いているときは縦棒を消して横棒だけにする */
.p-faq__icon {
  position: relative;
  flex-shrink: 0;
  width: 2.4rem;
  height: 2.4rem;
}

.p-faq__icon::before,
.p-faq__icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  background-color: #f6741b;
  transform: translate(-50%, -50%);
}

.p-faq__icon::before {
  width: 2.4rem;
  height: 2px;
}

.p-faq__icon::after {
  width: 2px;
  height: 2.4rem;
  transition: opacity .2s ease;
}

.p-faq__item.is-open .p-faq__icon::after {
  opacity: 0;
}

.p-faq__a {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  padding: 0 4rem 2.8rem;
}

.p-faq__a[hidden] {
  display: none;
}

.p-faq__a-text {
  font-size: 1.6rem;
  font-weight: 400;
  line-height: 1.75; /* Figma 28px / 16px */
  color: #333;
}

@media (max-width: 1023px) {
  /* ----- p-faq ----- */
  .p-faq {
    padding: 8rem 0;
  }

  .p-faq__list {
    margin-top: 4rem;
  }

  .p-faq__q-text {
    font-size: 2rem;
  }
}

@media (max-width: 767px) {
  .p-faq {
    padding: 6rem 0;
  }

  .p-faq__list {
    gap: 1.2rem;
    margin-top: 3rem;
  }

  .p-faq__q {
    gap: 1.2rem;
    padding: 2rem 2rem 1.8rem;
  }

  .p-faq__item.is-open .p-faq__q {
    padding-bottom: 1.2rem;
  }

  .p-faq__q-body,
  .p-faq__a {
    gap: 1rem;
  }

  .p-faq__q-text {
    font-size: 1.6rem;
  }

  .p-faq__badge {
    width: 3rem;
    height: 3rem;
    font-size: 1.8rem;
  }

  .p-faq__icon {
    width: 1.8rem;
    height: 1.8rem;
  }

  .p-faq__icon::before {
    width: 1.8rem;
  }

  .p-faq__icon::after {
    height: 1.8rem;
  }

  .p-faq__a {
    padding: 0 2rem 2rem;
  }

  .p-faq__a-text {
    font-size: 1.4rem;
  }
}

/* ==========================================================================
   p-cta  ページ末尾のオーディション応募バナー
   ==========================================================================
   このページのCONTACTは1枚だけのバナー（TOP・他の下層ページは c-contact） */

.p-cta {
  position: relative;
  padding: 4.7rem 0;
  background-color: #000;
  overflow: hidden;
}

/* 写真は黒地の上に40%で重ねる（文字を読ませるため） */
.p-cta__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: .4;
}

.p-cta__inner {
  position: relative;
  display: flex;
  justify-content: center;
}

.p-cta__card {
  position: relative;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  width: min(110rem, 100%);
  padding: 7rem 6rem;
  background-color: rgba(12, 12, 12, .7);
}

.p-cta__label {
  font-family: "Barlow", sans-serif;
  font-size: 2.4rem;
  font-weight: 400;
  line-height: 1;
  letter-spacing: .048rem;
  color: #fff;
}

.p-cta__text {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .4rem;
  font-weight: 500;
  line-height: 1.61;
  text-align: center;
  color: #fff;
}

.p-cta__main {
  font-size: 3.6rem;
  letter-spacing: .252rem;
}

.p-cta__sub {
  font-size: 2.8rem;
  letter-spacing: .196rem;
}

/* 矢印は文言を中央に置いたまま右端に寄せるため絶対配置にする */
.p-cta__icon {
  position: absolute;
  top: 50%;
  right: 6rem;
  width: 6.2457rem;
  height: 3.8486rem;
  transform: translateY(-50%);
}

@media (max-width: 1023px) {
  /* ----- p-cta ----- */
  .p-cta__card {
    padding: 5rem 4rem;
  }

  .p-cta__main {
    font-size: 3rem;
  }

  .p-cta__sub {
    font-size: 2.4rem;
  }

  .p-cta__icon {
    right: 4rem;
  }
}

@media (max-width: 767px) {
  .p-cta {
    padding: 3rem 0;
  }

  /* 文言の横に矢印を置く幅がないため、矢印を文言の下に置く */
  .p-cta__card {
    gap: 1.6rem;
    padding: 3rem 2rem;
  }

  .p-cta__label {
    font-size: 1.8rem;
  }

  .p-cta__main {
    font-size: 2rem;
  }

  .p-cta__sub {
    font-size: 1.6rem;
  }

  .p-cta__icon {
    position: static;
    width: 4rem;
    height: 2.464rem;
    transform: none;
  }
}