/* =====================
   RECRUIT ページ
   ===================== */

.page-recruit {
  padding: 60px 0 80px;
}

.page-recruit__inner {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 20px;
  box-sizing: border-box;
}

.recruit-section {
  margin-top: 80px;
}

.recruit-section__title {
  font-size: 18px;
  letter-spacing: 0.15em;
  margin-bottom: 16px;
}

.recruit-section__body {
  font-size: 14px;
  line-height: 1.9;
}

/* ========== 1. HERO ========== */

.recruit-hero {
  margin-bottom: 20px;
}

.recruit-hero__copy {
  text-align: center;
  margin-bottom: 0;
  position: relative;
  z-index: 2;
}

.recruit-hero__small {
  font-size: 12px;
  margin-bottom: 6px;
}

.recruit-hero__title {
  font-size: 26px;
  line-height: 1.5;
  letter-spacing: 0.12em;
  margin-bottom: 10px;
}

.recruit-hero__text {
  font-size: 13px;
  color: #555;
  line-height: 1.9;
}

.recruit-hero__visual {
  position: relative;
  margin-top: -200px;
}

.recruit-hero__people img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: contain;
  position: relative;
  z-index: 1;
}

/* SKILL / SHOOTING / LIFE テキスト（パンフ風フラット） */
.recruit-hero__badge {
  position: absolute;
  max-width: 180px;
  background: transparent;
  border-radius: 0;
  padding: 0;
  box-shadow: none;
  font-size: 12px;
  color: #333;
  text-align: left;
  line-height: 1.9;
}

.recruit-hero__badge-label {
  font-size: 10px;
  color: #999;
  letter-spacing: 0.15em;
  margin: 2px;
}

.recruit-hero__badge-title {
  font-size: 14px;
  letter-spacing: 0.18em;
  margin: 2px 2px 0;
}

.recruit-hero__badge-text {
  font-size: 12px;
  color: #555;
  text-align: justify;
  text-justify: inter-ideograph;
  margin: 2px;
}

/* 位置調整（パンフの配置に寄せる） */
.recruit-hero__badge--left {
  right: 85%;
  top: 70%;
  transform: translateY(-50%);
}

.recruit-hero__badge--right-top {
  left: 85%;
  top: 30%;
}

.recruit-hero__badge--right-bottom {
  left: 80%;
  bottom: 0;
}

/* SPではバッジを重ねず、下に縦並びで表示 */
@media (max-width: 767px) {
  .recruit-hero__visual {
    margin-top: -160px;
  }

  .recruit-hero__badge {
    position: static;
    max-width: none;
    margin-top: 12px;
  }
}

@media (max-width: 600px) {
  .recruit-hero__visual {
    margin-top: -100px !important;
    padding-top: 0 !important;
  }
}

/* Skill / Life / Shooting 見出し（共通） */
.recruit-skill__script,
.recruit-script,
.recruit-shooting__title {
  font-family: 'Sansilk', cursive;
  font-size: 150px;
  font-weight: 100;
  letter-spacing: 0;
  line-height: 1.0;
  margin: 0;
}

/* Skill / Shooting / Life ヘッドのレイアウトを統一 */
.recruit-skill__head,
.recruit-shooting__head,
.recruit-life__head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
}

/* ========== 2. Skill ========== */

.recruit-skill__top {
  display: flex;
  gap: 48px;
  align-items: center;
  margin-bottom: 40px;
}

.recruit-skill__label {
  font-size: 12px;
  letter-spacing: 0.2em;
}

.recruit-skill__lead-wrap {
  flex: 1 1 auto;
  max-width: 100%;
}

.recruit-skill__lead {
  margin: 0;
  font-size: 14px;
  line-height: 2;
}

.recruit-skill__columns {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  margin-top: 24px;
}

.recruit-skill__item {
  background: #fff;
  border-radius: 10px;
  padding: 16px 16px 18px;
  box-shadow: 0 4px 14px rgba(0,0,0,0.05);
  font-size: 13px;
}

.recruit-skill__num {
  font-size: 12px;
  color: #aaa;
  margin-bottom: 4px;
}

.recruit-skill__title {
  font-size: 14px;
  margin-bottom: 6px;
}

.recruit-skill__text {
  font-size: 12px;
  line-height: 1.9;
}

/* Skill：SPレイアウト */
@media (max-width: 900px) {
  .recruit-skill__top {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }

  .recruit-skill__script {
    font-size: 56px;
  }

  .recruit-skill__lead-wrap {
    max-width: 100%;
  }

  .recruit-skill__columns {
    grid-template-columns: 1fr;
  }
}

/* ========== 3. Curriculum ========== */

/* カリキュラム全体の背景ボックス */
.recruit-curriculum {
  background: #f7f7f7;
  border-radius: 16px;
  padding: 18px 32px 24px;
  margin-top: 40px;
}

/* 上段：CURRICULUM / カリキュラム / 見出し */
.recruit-curriculum__head {
  display: flex;
  justify-content: flex-start;
  align-items: baseline;
  gap: 40px;
  margin-top: 12px;
}

.recruit-curriculum__head-left {
  display: flex;
  align-items: baseline;
  gap: 10px;
}

.recruit-curriculum__main {
  font-size: 16px;
  letter-spacing: 0.22em;
  margin: 0;
}

.recruit-curriculum__sub {
  font-size: 11px;
  letter-spacing: 0.2em;
  margin: 0;
}

/* 右側：見出しテキスト */
.recruit-curriculum__headline {
  font-size: 15px;
  margin: 0;
  white-space: nowrap;
}

/* 下段：1年目 / 2年目 / 3年目 */
.recruit-curriculum__grid {
  margin-top: 18px;
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1.6fr) minmax(0, 0.5fr);
  column-gap: 32px;
}

/* 年数ブロック共通 */
.recruit-curriculum__year-block {
  position: relative;
  font-size: 12px;
  padding: 0;
  text-align: left;
}

/* 黒ブロックの 1年目 / 2年目 / 3年目 */
.recruit-curriculum__year-label {
  display: block;
  padding: 4px 14px;
  background: #000;
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-align: center;
  margin-bottom: 8px;
  border-radius: 2px;
}

/* リスト共通 */
.recruit-curriculum__list {
  list-style: none;
  padding: 0 4px;
  margin: 0;
  font-size: 10px;
  line-height: 1.8;
}

.recruit-curriculum__list li + li {
  margin-top: 2px;
}

/* 年間の流れの矢印 */
.recruit-curriculum__year-block--1::after,
.recruit-curriculum__year-block--2::after {
  content: "";
  position: absolute;
  top: 50%;
  right: -18px;
  width: 0;
  height: 0;
  border-left: 10px solid #555;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
}

/* 1〜2年目：3列 */
.recruit-curriculum__year-block--1 .recruit-curriculum__list,
.recruit-curriculum__year-block--2 .recruit-curriculum__list {
  column-count: 3;
  column-gap: 20px;
}

/* 3年目：1列 */
.recruit-curriculum__year-block--3 .recruit-curriculum__list {
  column-count: 1;
  column-gap: 18px;
}

/* 列途中で切れにくく */
.recruit-curriculum__year-block--1 .recruit-curriculum__list li,
.recruit-curriculum__year-block--2 .recruit-curriculum__list li,
.recruit-curriculum__year-block--3 .recruit-curriculum__list li {
  break-inside: avoid;
}

/* 折り返したくない項目用 */
.recruit-curriculum__list li.curriculum-nowrap {
  white-space: nowrap;
}

/* リスト本体の配置 */
.recruit-curriculum__year-block .recruit-curriculum__list {
  display: block;
  max-width: 100%;
  margin: 0 auto;
  text-align: left;
}

/* Curriculum：SPレイアウト */
@media (max-width: 900px) {
  .recruit-curriculum {
    padding: 22px 18px 20px;
    border-radius: 12px;
  }

  .recruit-curriculum__head {
    flex-direction: column;
    align-items: flex-start;
    row-gap: 6px;
  }

  .recruit-curriculum__headline {
    white-space: normal;
  }

  .recruit-curriculum__grid {
    grid-template-columns: 1fr;
    row-gap: 20px;
  }

  .recruit-curriculum__year-block--1::after,
  .recruit-curriculum__year-block--2::after {
    display: none;
  }
}

/* ========== 4. Shooting ========== */

.recruit-shooting {
  margin-top: 80px;
}

/* 外側グリッド */
.recruit-shooting__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1.0fr);
  grid-template-rows: auto auto;
  grid-template-areas:
    "ph1 text"
    "bottom bottom";
  column-gap: 60px;
  row-gap: 0;
  align-items: start;
}

/* 上段左：1枚目 */
.recruit-shooting__photo--1 {
  grid-area: ph1;
  position: relative;
  margin: 0;
  aspect-ratio: 5 / 3;
}

/* 下段：2枚目・3枚目 */
.recruit-shooting__bottom {
  grid-area: bottom;
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 0;
}

.recruit-shooting__photo--2,
.recruit-shooting__photo--3 {
  position: relative;
  margin: 0;
  aspect-ratio: 16 / 9;
}

.recruit-shooting__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* テキスト側（右上） */
.recruit-shooting__text {
  grid-area: text;
  max-width: none;
  margin: 0 auto;
  font-size: 13px;
  line-height: 2;
}

/* Shooting：右カラム調整 */
.recruit-shooting__head {
  align-items: center;
}

.recruit-shooting__title {
  font-size: clamp(72px, 9vw, 150px);
  line-height: 0.95;
  white-space: nowrap;
}

.recruit-shooting__desc {
  max-width: 420px;
}

.recruit-shooting__lead {
  margin-top: 18px;
}

.recruit-shooting__label {
  font-size: 12px;
  margin: 0;
}

.recruit-shooting__body {
  margin: 0;
}

/* 1枚目のトリミング位置 */
.recruit-shooting__photo--1 img {
  object-position: center 10%;
}

/* 2枚目のトリミング位置 */
.recruit-shooting__photo--2 img {
  object-position: center 20%;
}

/* Shooting：SPレイアウト */
@media (max-width: 900px) {
  .recruit-shooting__inner {
    grid-template-columns: 1fr;
    grid-template-areas:
      "text"
      "ph1"
      "bottom";
    row-gap: 20px;
  }

  .recruit-shooting__title {
    font-size: clamp(56px, 16vw, 110px);
    white-space: normal;
  }

  .recruit-shooting__bottom {
    grid-template-columns: 1fr;
    row-gap: 8px;
  }
}

/* ========== 5. Life + Voices ========== */

.recruit-life {
  margin-top: 80px;
}

.recruit-life__top {
  display: flex;
  align-items: center;
  gap: 48px;
  margin-bottom: 56px;
}

.recruit-life__head {
  flex-shrink: 0;
}

.recruit-life__lead-wrap {
  flex: 1 1 auto;
}

.recruit-life__lead {
  margin: 0;
  line-height: 2;
  font-size: 13px;
}

/* スタッフ4人のレイアウト */
.recruit-voices {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 40px;
}

.recruit-voice {
  text-align: center;
  padding: 24px 12px 0;
}

/* 写真まわり（個別の微調整） */
.recruit-voice__thumb--tomita img {
  transform: scale(1.2) translateX(5%) translateY(5%);
}

.recruit-voice__thumb--sasada img {
  transform: scale(1.2) translateX(-7%) translateY(0%);
}

.recruit-voice__thumb--uozaki img {
  transform: scale(1.2) translateY(4%);
}

.recruit-voice__thumb--yamaguchi img {
  transform: scale(1.2) translateX(10%) translateY(-5%);
}

.recruit-voice__name {
  margin: 0 0 2px;
  font-size: 14px;
  font-weight: 600;
}

.recruit-voice__school {
  margin: 0 0 10px;
  font-size: 11px;
}

.recruit-voice__text {
  max-width: 260px;
  margin: 16px auto 0;
  font-size: 13px;
  line-height: 1.9;
  text-align: left;
}

/* タイトルだけ中央寄せ＆少し太く */
.recruit-voice__text-title {
  display: block;
  text-align: center;
  font-weight: 600;
  font-size: 14px;
  margin-bottom: 8px;
}

/* 本文は通常太さ＋左揃え */
.recruit-voice__text-body {
  display: block;
  font-weight: 400;
}

/* 役職ラベル：円弧テキスト用 */
.recruit-voice__role {
  margin: 0 0 6px;
  font-size: 11px;
  letter-spacing: 0.25em;
  text-transform: uppercase;
}

/* 写真＋円弧役職のラッパー */
.recruit-voice__thumb-wrap {
  position: relative;
  width: 180px;
  margin: 0 auto 32px;
}

/* 円弧テキスト SVG 自体の位置 */
.recruit-voice__role-arc {
  position: absolute;
  top: -100px;
  left: 50%;
  transform: translateX(-50%);
  width: 180px;
  height: 180px;
}

/* 円弧テキストのスタイル */
.recruit-voice__role-text {
  font-size: 18px;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  fill: #333;
}

/* 丸写真本体 */
.recruit-voice__thumb {
  width: 160px;
  height: 160px;
  margin: 24px auto 0;
  border-radius: 50%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.recruit-voice__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 10%;
  display: block;
}

/* スクリーンリーダー用 */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Voices：レスポンシブ */
@media (max-width: 1000px) {
  .recruit-voices {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: 32px;
  }
}

@media (max-width: 640px) {
  .recruit-voices {
    grid-template-columns: 1fr;
  }
}

/* ========== 6. Contact ========== */

.recruit-contact {
  text-align: center;
}

.recruit-contact__buttons {
  margin-top: 18px;
  display: flex;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
}

.recruit-btn {
  display: inline-block;
  padding: 10px 20px;
  border-radius: 999px;
  background: #000;
  color: #fff;
  text-decoration: none;
  font-size: 13px;
  letter-spacing: 0.06em;
  box-shadow: 0 8px 18px rgba(0,0,0,0.12);
  transition: transform .15s ease, box-shadow .15s ease, opacity .15s ease;
}

.recruit-btn--outline {
  background: #fff;
  color: #333;
  border: 1px solid #ccc;
  box-shadow: none;
}

.recruit-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 26px rgba(0,0,0,0.18);
  opacity: .96;
}

/* ======================
   RECRUIT ダークテーマ
   ====================== */

body.theme-dark .page-recruit {
  background: #1E2022;          /* ベースとそろえる */
  color: #E6E9ED;
}

/* 共通テキスト色 */
body.theme-dark .page-recruit,
body.theme-dark .page-recruit p,
body.theme-dark .page-recruit li {
  color: #E6E9ED;
}

/* 見出し／ラベル系は少し明るめに */
body.theme-dark .recruit-section__title,
body.theme-dark .recruit-hero__badge,
body.theme-dark .recruit-hero__title,
body.theme-dark .recruit-skill__label,
body.theme-dark .recruit-curriculum__main,
body.theme-dark .recruit-curriculum__headline {
  color: #F5F7FA;
}

/* HERO 説明文などの本文 */
body.theme-dark .recruit-hero__text,
body.theme-dark .recruit-skill__lead,
body.theme-dark .recruit-life__lead,
body.theme-dark .recruit-shooting__text,
body.theme-dark .recruit-voice__text {
  color: #D4D7DD;
}

/* ===== 1. Skill カード ===== */
body.theme-dark .recruit-skill__item {
  background: #262A2E;
  border-radius: 10px;
  box-shadow: none;
  border: 1px solid #33373B;
  color: #E6E9ED;
}

body.theme-dark .recruit-skill__num {
  color: #9FA4AD;
}

body.theme-dark .recruit-skill__title {
  color: #F5F7FA;
}

/* ===== 2. Curriculum 枠 ===== */
body.theme-dark .recruit-curriculum {
  background: #262A2E;
  border-radius: 16px;
  border: 1px solid #33373B;
}

body.theme-dark .recruit-curriculum__sub {
  color: #B7BCC5;
}

body.theme-dark .recruit-curriculum__year-label {
  background: #F5F7FA;
  color: #111;
}

/* 矢印の色だけ少し淡く */
body.theme-dark .recruit-curriculum__year-block--2::after,
body.theme-dark .recruit-curriculum__year-block--1::after {
  border-left-color: #888D96;
}

/* リスト文字色を少し淡く */
body.theme-dark .recruit-curriculum__list {
  color: #D4D7DD;
}

/* ===== 3. Voices（スタッフの声） ===== */
body.theme-dark .recruit-voice__name {
  color: #F5F7FA;
}

body.theme-dark .recruit-voice__school {
  color: #B7BCC5;
}

body.theme-dark .recruit-voice__text {
  color: #D4D7DD;
}

/* 円弧テキストも少し明るめに */
body.theme-dark .recruit-voice__role-text {
  fill: #E6E9ED;
}

/* ===== 4. Contact ボタン ===== */
body.theme-dark .recruit-btn {
  background: #F5F7FA;        /* 明るいボタンに反転 */
  color: #111;
  box-shadow: 0 8px 18px rgba(0,0,0,0.35);
}

body.theme-dark .recruit-btn--outline {
  background: transparent;
  color: #F5F7FA;
  border-color: #F5F7FA;
  box-shadow: none;
}

body.theme-dark .recruit-btn:hover {
  opacity: 0.96;
  transform: translateY(-2px);
}

/* ===== 細かい調整 ===== */

/* セクションタイトルまわりのラベル */
body.theme-dark .recruit-hero__small {
  color: #B7BCC5;
}

/* 「CURRICULUM」「LIFE」など英字の大きいスクリプト */
body.theme-dark .recruit-skill__script,
body.theme-dark .recruit-script,
body.theme-dark .recruit-shooting__title {
  color: #F5F7FA;
}

/* ボックス系の枠線を少しだけ見える程度に */
body.theme-dark .recruit-voices {
  /* 枠はそのまま。必要なら下のコメントを外す */
  /* border-top: 1px solid #33373B; */
}

/* ========== RECRUIT：SP レスポンシブ（全体調整） ========== */

@media (max-width: 900px) {
  .recruit-life__top {
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
  }
}

@media (max-width: 599px) {
  .page-recruit {
    padding: 40px 0 60px;
  }

  .recruit-hero__title {
    font-size: 20px;
  }

  .recruit-hero__visual {
    margin-top: 20px;
  }
}