/* =============================================================================
   recruit.css — Recruit（#recruit）
   採用メッセージとオフィスギャラリー、メンバーの声、動画、社長からのひとこと、
   そして SNS リンク。
   ============================================================================= */

.recruit-main {
  display: grid;
  grid-template-columns: 1.08fr 1fr;
  gap: 8%;
  margin-top: 62px;
  align-items: start;
}

.recruit-copy h2 {
  line-height: 1.65;
  letter-spacing: -.04em;
  color: var(--accent);
  margin-bottom: 30px;
}

.recruit-copy p {
  line-height: 2.2;
  color: var(--text-muted);
  margin-bottom: 24px;
}

.recruit-copy .company-intro {
  color: var(--text);
  line-height: 1.9;
  letter-spacing: -.025em;
}

.recruit-copy strong {
  color: var(--accent);
  line-height: 1.9;
  display: block;
}

.recruit-ctas {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 34px;
}

.company-gallery {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  position: relative;
  isolation: isolate;
}

.company-gallery:before {
  content: '';
  position: absolute;
  z-index: -1;
  inset: -70px -80px;
  border: 45px solid transparent;
  border-color: #63bbe533 #f5985c55 #7493d222;
  border-radius: 50%;
  filter: blur(33px);
  transform: rotate(-24deg);
}

.company-gallery figure {
  overflow: hidden;
  border-radius: 12px;
  translate: none;
}

.company-gallery .company-gallery-main {
  grid-column: 1/-1;
  border-radius: 150px 150px 12px 12px;
  aspect-ratio: 1.3;
}

/* 正方形ではなく横長にする。横長の写真に横一列で並んだ人物が切れずに収まるため
   （正方形では両端の 2 人が切れていた）。 */
.company-gallery figure:not(.company-gallery-main) {
  aspect-ratio: 1.3;
}

.company-gallery figure:last-child {
  margin-top: 40px;
}

.company-gallery img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.voices-grid {
  display: grid;
  grid-template-columns: repeat(4,1fr);
  gap: 24px;
  margin: 115px 0 85px;
  position: relative;
}

.voice-card {
  background: white;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 8px 32px #18346e09;
}

.voice-image {
  position: relative;
  aspect-ratio: 1.3;
  overflow: hidden;
}

.voice-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .5s, scale .6s var(--motion-ease);
}

.voice-image .arrow {
  position: absolute;
  right: 12px;
  top: 12px;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  background: white;
  border-radius: 50%;
}

.voice-card h3 {
  line-height: 1.8;
  padding: 18px 18px 10px;
}

.voice-card small {
  color: var(--text-muted);
  display: block;
  padding: 0 18px 22px;
}

.youtube-feature {
  padding-top: 42px;
}

.youtube-feature-head {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  align-items: end;
  margin-bottom: 30px;
}

.youtube-feature-head h2 {
  margin-top: 8px;
}

.youtube-grid {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 28px;
}

.youtube-thumb {
  position: relative;
  aspect-ratio: 16/9;
  overflow: hidden;
  border-radius: 10px;
}

.youtube-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .4s, scale .6s var(--motion-ease);
}

.youtube-play {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--accent);
  background: #fffffff0;
  padding-left: 3px;
}

.youtube-duration {
  position: absolute;
  bottom: 10px;
  right: 10px;
  background: #143251bd;
  color: white;
  padding: 4px 7px;
  border-radius: 3px;
}

.youtube-card h3 {
  line-height: 1.9;
  margin-top: 18px;
}

.president-note {
  margin-top: 65px;
}

.president-note-card {
  display: grid;
  grid-template-columns: .95fr 1.2fr;
  overflow: hidden;
  background: var(--c-pale);
  border-radius: var(--photo-radius);
}

.president-note-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.president-note-copy {
  padding: 38px 44px;
}

.president-note-copy h2 {
  line-height: 1.7;
  margin: 15px 0;
}

.president-note-copy p {
  color: var(--text-muted);
}

.president-note-copy strong {
  display: flex;
  gap: 35px;
  align-items: center;
  margin-top: 20px;
  color: var(--accent);
}

/* 公式チャンネル。1 つずつボタンにして動画の下に中央揃えで並べる。 */
.company-social {
  display: flex;
  justify-content: center;
  margin-top: 48px;
}

.company-social-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;
}

.company-social-label {
  display: flex;
  align-items: center;
  gap: 10px;
}

.channel-icon {
  width: 21px;
  height: 21px;
}

/* 装飾の光をセクション内に収めつつ、セクションをスクロールコンテナにはしない。 */
.recruit {
  padding: 108px 0 92px;
  overflow-x: clip;
  overflow-y: visible;
}

@media (max-width:1100px) {
  .recruit-main {
    gap: 4%;
  }

  .voices-grid {
    gap: 16px;
  }

  .president-note-copy {
    padding: 28px;
  }
}

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

  .company-gallery {
    gap: 10px;
  }

  .company-gallery .company-gallery-main {
    border-radius: 80px 80px 10px 10px;
  }

  .voices-grid {
    grid-template-columns: repeat(2,1fr);
    max-width: 640px;
    margin-inline: auto;
  }

  .voice-image {
    aspect-ratio: 1.45;
  }

  .youtube-grid {
    gap: 18px;
  }

  .youtube-feature-head .text-link {
    gap: 15px;
  }

  .president-note-card {
    grid-template-columns: 1fr 1.2fr;
  }

}

@media (max-width:760px) {
  .recruit {
    padding: 68px 0 45px;
  }

  .recruit-main {
    grid-template-columns: 1fr;
    gap: 48px;
    margin-top: 35px;
  }

  .recruit-copy h2 {
    margin-bottom: 22px;
  }

  .recruit-copy p {
    margin-bottom: 18px;
  }

  .recruit-copy .company-intro {
    line-height: 1.9;
  }

  .recruit-ctas {
    gap: 10px;
    margin-top: 26px;
  }

  .company-gallery {
    max-width: 500px;
    margin: auto;
    gap: 14px;
  }

  .company-gallery .company-gallery-main {
    aspect-ratio: 1.5;
  }

  .company-gallery figure:not(.company-gallery-main) {
    aspect-ratio: 1.3;
  }

  .company-gallery figure:last-child {
    margin-top: 22px;
  }

  .company-gallery:before {
    inset: -20px -30px;
    filter: blur(25px);
  }

  /* スマホでは 5 人分の声を縦に積むと収まらないので、横スワイプのレールにする。カードは
     少し小さく、スナップさせ、画面の両端まで裁ち落とす。 */
  .voices-grid {
    display: flex;
    grid-template-columns: none;
    gap: 14px;
    margin-top: 65px;
    margin-bottom: 50px;
    max-width: none;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--gutter);
    padding-inline: var(--gutter);
    margin-inline: calc(var(--gutter) * -1);
    scrollbar-width: thin;
    -webkit-overflow-scrolling: touch;
  }

  .voices-grid > .voice-card {
    flex: 0 0 66%;
    scroll-snap-align: start;
  }

  .voice-card h3 {
    padding: 14px 13px 10px;
  }

  .voice-card small {
    padding: 0 13px 16px;
  }

  .voice-image {
    aspect-ratio: 1.1;
  }

  .voice-image .arrow {
    right: 7px;
    top: 7px;
    width: 23px;
    height: 23px;
  }

  .youtube-feature {
    padding-top: 27px;
  }

  .youtube-feature-head {
    display: block;
    margin-bottom: 22px;
  }

  .youtube-feature-head .text-link {
    margin-top: 12px;
  }

  .youtube-grid {
    grid-template-columns: 1fr;
    gap: 27px;
  }

  .president-note {
    margin-top: 36px;
  }

  .president-note-card {
    grid-template-columns: 1fr;
  }

  .president-note-media {
    aspect-ratio: 1.8;
  }

  .president-note-copy {
    padding: 24px;
  }

  .president-note-copy h2 {
    margin: 10px 0;
  }

  .company-social {
    margin-top: 32px;
  }

  .company-social-links {
    gap: 12px;
  }

  .company-social-label {
    gap: 6px;
  }


  .channel-icon {
    width: 17px;
    height: 17px;
  }
}

.company-gallery figure,
.company-gallery .company-gallery-main,
.voice-image,
.youtube-thumb,
.president-note-media {
  border-radius: var(--photo-radius);
  overflow: hidden;
}

.scroll-choreography .voice-image[data-motion="media"],
.scroll-choreography .youtube-thumb[data-motion="media"],
.scroll-choreography .president-note-media[data-motion="media"] {
  clip-path: inset(0 0 calc((1 - var(--enter)) * 100%) 0 round var(--photo-radius));
}

@media (min-width:761px) {
  /* 採用メッセージは About の導入文と同じ組み方にする。 */
  #recruit .recruit-copy h2 {
    line-height: 1.6;
  }
}

/* セクション全体の背後に、ネイビー調のオフィス写真を 1 枚固定で敷く。上に重ねる色は
   ブランドブルーより一段深く、--c-deep（#0e2f8e）から暗くした --c-blue-mid へ。被覆を少し
   強めて、写真自体の青があまり透けないようにする。 */
#recruit {
  position: relative;
  isolation: isolate;
  background: transparent;
  color: #fff;
}

#recruit:before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(115deg,rgba(14,47,142,.86),rgba(12,91,156,.8)),url('../assets/recruit-backdrop.webp') center/cover fixed;
  mask-image: linear-gradient(transparent,#000 7%,#000 93%,transparent);
}

#recruit :is(.section-title h2,.section-title p,.recruit-copy h2,.recruit-copy p,.recruit-copy strong,.youtube-feature-head h2,.youtube-feature-head .text-link,.youtube-card h3,.youtube-card small,.company-social-label) {
  color: #fff;
}

#recruit .youtube-feature,
#recruit .company-social {
  border-color: #ffffff40;
}

#recruit .voice-card,
#recruit .voice-card h3,
#recruit .voice-image .arrow {
  color: #123675;
}

#recruit .voice-card small {
  color: #466080;
}

#recruit .president-note-copy h2,
#recruit .president-note-copy .text-link {
  color: #123675;
}

#recruit .president-note-copy p {
  color: #365477;
  line-height: 1.9;
}

/* 本文は About の導入文と同じサイズ。 */
#recruit .recruit-copy p,
#recruit .recruit-copy .company-intro,
#recruit .recruit-copy .recruit-invitation {
  line-height: 1.95;
}

/* 声のポートレート。暖色 / 寒色の光の下でも自然な色味に。 */
#recruit .voice-image {
  isolation: isolate;
}

#recruit .voice-image .arrow {
  z-index: 2;
}

/* CTA はフェードではなく動きで登場させる。 */
.scroll-choreography #recruit .recruit-ctas > a[data-motion] {
  opacity: 1;
  clip-path: inset(0 0 calc((1 - var(--enter,1)) * 100%) 0 round 999px);
}

#recruit .voice-image img {
  object-position: 65% 40%;
  filter: brightness(1.04) saturate(.95);
}

#recruit .voice-image:after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(115deg,#ff8b3377,#ffae4033 38%,#38c4ff77);
  mix-blend-mode: soft-light;
  z-index: 1;
  opacity: .65;
}

/* 声のカード: 縁の処理、メンバーごとのデュオトーン、ポートレートのライティング。 */
#recruit .voice-image,
#recruit .voice-image img {
  border-radius: 0;
  --photo-radius: 0px;
}

#recruit .voice-card {
  overflow: hidden;
  border-radius: 10px;
}

#recruit .voice-card:nth-child(3) .voice-image img {
  object-position: 53% 40%;
}

#recruit .voice-card:nth-child(4) .voice-image img {
  object-position: 70% 50%;
}

#recruit .company-gallery figure {
  position: relative;
  isolation: isolate;
  background: var(--c-deep);
}

/* iOS Safari は overflow:hidden＋角丸で、動き続ける子（漂う光・拡大した写真）を
   四角いまま描くことがある。登場を終えた後も clip-path で角丸に切り抜いておく。 */
.scroll-choreography #recruit .company-gallery > figure.is-visible,
.motion-paused #recruit .company-gallery > figure,
.motion-reduced #recruit .company-gallery > figure {
  clip-path: inset(0 round var(--photo-radius)) !important;
}

#recruit .company-gallery figure::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
}

/* オフィスギャラリーにはカルチャーギャラリーと同じネイビー / 光の処理を使う。 */
#recruit .company-gallery figure img {
  transition: filter .9s cubic-bezier(.16,1,.3,1),transform .8s;
  filter: none;
}

#recruit .company-gallery figure:nth-child(n)::after {
  background: var(--c-deep);
  mix-blend-mode: screen;
  transition: opacity .9s cubic-bezier(.16,1,.3,1);
  opacity: 0;
}

#recruit .company-gallery figure::before {
  content: '';
  position: absolute;
  inset: -20%;
  z-index: 2;
  pointer-events: none;
  mix-blend-mode: screen;
  background: radial-gradient(46% 52% at 18% 82%,rgba(255,150,40,1),rgba(230,81,0,.7) 42%,transparent 74%),radial-gradient(44% 50% at 84% 16%,rgba(120,85,240,1),rgba(14,47,142,.6) 44%,transparent 74%),radial-gradient(32% 38% at 60% 58%,rgba(255,179,0,.55),transparent 70%);
  transition: opacity 1.1s cubic-bezier(.16,1,.3,1);
  animation: duo-light 7s ease-in-out infinite alternate;
  opacity: .9;
  animation-play-state: running;
}

@media (prefers-reduced-motion:reduce) {
  #recruit .company-gallery figure::before {
    opacity: 0;
  }
}

/* 声は 5 人分。締めのグラデーションはゆっくり漂わせる。 */
#recruit .voices-grid {
  grid-template-columns: repeat(5,minmax(0,1fr));
  max-width: none;
  gap: clamp(14px,1.4vw,24px);
}

#recruit .voice-card:nth-child(5) .voice-image img {
  object-position: 55% 40%;
}

@media (max-width:1100px) {
  #recruit .voices-grid {
    grid-template-columns: repeat(3,minmax(0,1fr));
  }
}

@media (max-width:760px) {
  #recruit .voices-grid {
    grid-template-columns: repeat(2,minmax(0,1fr));
  }
}

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

body.variant-b #recruit .recruit-copy p.company-intro {
  line-height: 1.85;
}

/* スマホの採用情報：「会社を知る」「採用情報を見る」のボタンは中央に並べる（2026-10-29 実機レビュー）。 */
@media (max-width: 760px) {
  .recruit-ctas {
    flex-direction: column;
    align-items: center;
  }

  /* 2 つのボタンの幅を揃える（長いほう「採用情報を見る」に合わせた固定幅）。 */
  .recruit-ctas > .btn {
    width: 240px;
  }
}

/* スマホの YouTube のカード：サムネイルと題名の間を半分ほどに詰める（見た目の空き 約 24px → 約 12px。
   2026-10-29 実機レビュー）。 */
@media (max-width: 760px) {
  .youtube-card h3 {
    margin-top: 6px;
  }
}