/* ========================================
   Recruit Hero v3 (Pill Visual Component)
   ======================================== */

:root {
    --accent: #3B82F6;
    --ink: #0F1115;
    --muted: #6B7280;
    --bg: #F6F8FB;
    --radius: 20px;
    --shadow: 0 10px 30px rgba(16, 24, 40, .08);
}

/* 横スクロール防止 */
body {
    overflow-x: clip;
}

.recruit-hero {
    background: #ffffff;
    padding: clamp(64px, 9vw, 96px) 0 clamp(80px, 12vw, 120px) 0;
    color: var(--ink);
    position: relative;
}

/* 背景三角形（セクション専用） */
.recruit-section-bg {
    position: relative;
}

.recruit-section-bg::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 68%;
    height: 100%;
    background: #f5f7fa;
    /* 薄いグレーの三角 */
    z-index: 0;
    clip-path: polygon(100% 0, 18% 100%, 100% 100%);
}

/* ===== グリッドレイアウト ===== */
.recruit-hero__inner {
    display: grid;
    grid-template-columns: 1fr auto;
    column-gap: 40px;
    align-items: center;
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 24px 0 24px;
    position: relative;
    z-index: 1;
}

/* ===== 左列：テキストコンテンツ ===== */
.recruit-hero__col--copy {
    max-width: 820px;
    padding-right: 40px;
}

.recruit-hero__label {
    font-size: clamp(10px, 1.2vw, 14px);
    font-weight: 600;
    color: var(--accent);
    margin-bottom: clamp(12px, 2vw, 16px);
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.recruit-hero__title {
    display: block;
    font-size: clamp(28px, 4.2vw, 56px);
    font-weight: 700;
    line-height: 1.4;
    color: var(--ink);
    letter-spacing: inherit;
    max-width: 680px;
    white-space: normal;
    word-break: keep-all;
    margin-bottom: clamp(20px, 3vw, 32px);
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.recruit-hero__desc {
    font-size: clamp(16px, 2vw, 20px);
    line-height: 1.7;
    color: var(--muted);
    margin-bottom: clamp(32px, 4vw, 48px);
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* ===== 右列：ピル型画像 ===== */
.recruit-hero__col--visual {
    position: relative;
    translate: calc(8% + 24px) 0;
}

.pill-visual {
    width: clamp(800px, 50vw, 1000px);
    height: clamp(500px, 40vw, 600px);
    border-radius: 50% 0 0 50%;
    clip-path: ellipse(90% 80% at 100% 50%);
    overflow: hidden;
    position: relative;
    opacity: 0;
    transform: translateX(24px);
    transition: opacity 0.4s ease, transform 0.4s ease;
}

/* ===== スライダー構造 ===== */
.pill-visual__slider {
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: relative;
}

.pill-visual__track {
    display: flex;
    width: 200%;
    /* 3枚 + 3枚の複製 = 6枚分 */
    height: 100%;
    animation: slide-infinite 20s linear infinite;
}

.pill-visual__slide {
    width: 33.333%;
    /* 6枚中2枚分（3枚の実画像分） */
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    flex-shrink: 0;
    border-radius: 8px;
    margin: 0 4px;
}

/* ===== 無限スライドアニメーション ===== */
@keyframes slide-infinite {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-50%);
        /* 3枚分（実画像分）移動 */
    }
}

.pill-visual__veil {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(120% 120% at 50% 0%, rgba(255, 255, 255, 0.42), rgba(255, 255, 255, 0) 55%);
}

/* ===== レスポンシブ対応 ===== */

/* 1024px未満 */
@media (max-width: 1024px) {
    .pill-visual {
        width: clamp(500px, 60vw, 650px);
        height: clamp(400px, 50vw, 500px);
        border-radius: 50% 0 0 50%;
        clip-path: ellipse(90% 80% at 100% 50%);
    }

    .recruit-hero__col--visual {
        translate: calc(5% + 24px) 0;
    }
}

/* 768px未満：縦積みレイアウト */
@media (max-width: 768px) {
    .recruit-hero__inner {
        grid-template-columns: 1fr;
        column-gap: 0;
        row-gap: 32px;
    }

    .recruit-hero__col--copy {
        padding-right: 0;
        text-align: center;
    }

    .recruit-hero__col--visual {
        translate: 0;
        order: 2;
    }

    .pill-visual {
        width: 90vw;
        height: auto;
        aspect-ratio: 16/10;
        margin-top: 32px;
        border-radius: 50%;
        clip-path: none;
    }

    .recruit-section-bg::before {
        width: 80%;
        opacity: .6;
    }
}

/* 420px未満：画像縮小 */
/* 480px以下での採用ヒーロー対応 */
@media (max-width: 480px) {
    .recruit-hero {
        padding: 40px 0;
    }

    .recruit-hero__inner {
        grid-template-columns: 1fr;
        gap: 24px;
        padding: 0 16px;
    }

    .recruit-hero__title {
        font-size: clamp(20px, 6vw, 28px);
        line-height: 1.3;
        margin-bottom: 16px;
    }

    .recruit-hero__text {
        font-size: clamp(14px, 4vw, 16px);
        line-height: 1.5;
        margin-bottom: 24px;
    }

    .pill-visual {
        width: 100%;
        height: 200px;
        border-radius: 50%;
        clip-path: none;
    }

    .recruit-hero__col--visual {
        translate: 0 0;
    }
}

/* 400px以下での採用ヒーロー対応 */
@media (max-width: 479px) {
    .recruit-hero {
        padding: 32px 0;
    }

    .recruit-hero__inner {
        padding: 0 12px;
        gap: 20px;
    }

    .recruit-hero__title {
        font-size: clamp(18px, 5vw, 24px);
        line-height: 1.2;
        margin-bottom: 12px;
    }

    .recruit-hero__text {
        font-size: clamp(13px, 3.5vw, 15px);
        line-height: 1.4;
        margin-bottom: 20px;
    }

    .pill-visual {
        height: 180px;
    }
}

@media (max-width: 420px) {
    .pill-visual {
        width: 92vw;
        height: auto;
        aspect-ratio: 16/9;
        border-radius: 50%;
        clip-path: none;
    }
}

/* ===== アニメーション状態 ===== */
.recruit-hero__label.is-inview,
.recruit-hero__title.is-inview,
.recruit-hero__desc.is-inview {
    opacity: 1;
    transform: translateY(0);
}

.pill-visual.is-inview {
    opacity: 1;
    transform: translateX(0);
}

/* ===== 省モーション対応 ===== */
@media (prefers-reduced-motion: reduce) {

    .pill-visual,
    .recruit-hero__label,
    .recruit-hero__title,
    .recruit-hero__desc {
        transition: none !important;
    }

    .pill-visual.is-inview {
        opacity: 1 !important;
        transform: none !important;
    }

    .pill-visual__track {
        animation: none !important;
    }
}

.recruit-hero__inner {
    max-width: 1280px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 58% 42%;
    gap: 56px;
    align-items: center;
    height: 730px;
}

.recruit-hero__label {
    font-weight: 900;
    font-size: 2.5rem;
    /* 実績・特徴と同じサイズ */
    letter-spacing: -.015em;
    color: #0F1115;
    opacity: 1;
    margin: 80px 0 28px;
}

/* 左：コラージュ */
.recruit-hero__grid {
    position: static;
}

.recruit-hero__collage {
    position: absolute;
    right: -5vw;
    top: -6vw;
    width: min(56vw, 900px);
    aspect-ratio: 2.2/1;
    clip-path: ellipse(76% 56% at 48% 50%);
    transform: rotate(-6deg);
    will-change: transform;
    opacity: 0;
    transform-origin: center;
    background: #fff;
    padding: clamp(10px, 1.4vw, 16px);
    box-shadow: 0 18px 40px rgba(16, 24, 40, .10);
    pointer-events: none;
    z-index: 1;
}

.recruit-hero.is-in .recruit-hero__collage {
    opacity: 1;
    transition: opacity .6s cubic-bezier(.2, .8, .2, 1), transform .6s cubic-bezier(.2, .8, .2, 1);
    transform: rotate(-6deg);
}

.recruit-hero__collage .recruit-hero__tile,
.recruit-hero__collage .tile {
    position: absolute;
    border-radius: clamp(16px, 2vw, 24px);
    box-shadow: var(--shadow);
    opacity: 0;
    transform: translateY(16px) rotate(var(--tilt, 0deg));
    will-change: transform;
    overflow: hidden;
    background: #fff;
}

.recruit-hero__collage img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: inherit;
    filter: saturate(.92) brightness(1.06) contrast(.98);
}

/* タイル座標（例） */
/* 既存HTMLの .tile.t1〜t6 を明示配置（添付に近い構成） */
.recruit-hero__collage .tile.t1 {
    left: 2%;
    top: 8%;
    width: 36%;
    height: 38%;
    --tilt: -3deg;
}

.recruit-hero__collage .tile.t2 {
    left: 34%;
    top: 2%;
    width: 34%;
    height: 24%;
    --tilt: 2deg;
}

.recruit-hero__collage .tile.t3 {
    left: 68%;
    top: 10%;
    width: 26%;
    height: 22%;
    --tilt: 1deg;
}

.recruit-hero__collage .tile.t4 {
    left: 8%;
    top: 54%;
    width: 32%;
    height: 36%;
    --tilt: -4deg;
}

.recruit-hero__collage .tile.t5 {
    left: 36%;
    top: 38%;
    width: 38%;
    height: 40%;
    --tilt: 3deg;
}

.recruit-hero__collage .tile.t6 {
    left: 74%;
    top: 42%;
    width: 22%;
    height: 30%;
    --tilt: -2deg;
}

.recruit-hero__collage .recruit-hero__tile:nth-child(7) {
    left: 18%;
    top: 30%;
    width: 20%;
    height: 22%;
    --tilt: 1deg;
}

.recruit-hero__collage .recruit-hero__tile:nth-child(8) {
    left: 58%;
    top: 70%;
    width: 30%;
    height: 24%;
    --tilt: -2deg;
}

.recruit-hero__collage .recruit-hero__tile:nth-child(9) {
    left: 4%;
    top: 78%;
    width: 22%;
    height: 18%;
    --tilt: 3deg;
}

/* 右：テキスト */
.recruit-hero__content {
    margin-bottom: 6rem;
}

.recruit-hero__title {
    font-weight: 900;
    font-size: clamp(40px, 6.2vw, 52px);
    line-height: 1.18;
    letter-spacing: -.02em;
    margin: 0 0 22px;
}

.recruit-hero__title .nowrap {
    white-space: nowrap;
}

.recruit-hero__desc {
    color: var(--muted);
    line-height: 1.9;
    margin: 0 0 75px;
    font-size: clamp(14px, 1.5vw, 16px);
    max-width: 65ch;
}

/* .recruit-hero__cta の既存スタイルを削除して .btn-sweep に統一 */

/* レスポンシブ */
@media (max-width:1200px) {
    .recruit-hero__inner {
        grid-template-columns: 60% 40%;
        gap: 40px;
    }
}

@media (max-width:960px) {
    .recruit-hero__inner {
        grid-template-columns: 1fr;
        gap: 32px;
    }
}

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

    .recruit-hero__grid {
        order: -1;
    }

    .recruit-hero__collage {
        right: -14vw;
        top: -10vw;
        width: 120vw;
        clip-path: ellipse(86% 62% at 48% 50%);
    }

    .btn-sweep {
        width: 67px !important;
        justify-content: center;
        padding: 14px 36px !important;
        font-size: 14px;
    }
}

/* 浮遊 */
@keyframes recruit-hero-floatY {
    0% {
        transform: translateY(-2px);
    }

    50% {
        transform: translateY(2px);
    }

    100% {
        transform: translateY(-2px);
    }
}

@media (prefers-reduced-motion: reduce) {
    .recruit-hero__collage .tile {
        animation: none !important;
        transition: none !important;
    }
}

/* ===== Recruit Hero: make CTA always visible in one viewport ===== */

/* .recruit-hero__inner は既に grid だが、gap/padding を高さ依存に寄せる */
.recruit-hero__inner {
    /* 横の余白は維持、縦の余白は高さに応じて縮む */
    padding-inline: clamp(16px, 3vw, 24px);
    gap: clamp(16px, 4vh, 56px);
}

/* コンテンツを 3 行グリッド化して CTA を最下段に固定 */
.recruit-hero__content {
    display: grid;
    grid-template-rows: auto 1fr auto;
    /* 上:見出し/本文, 中: 伸縮, 下:CTA */
    align-items: start;
    /* 文字が多い時も CTA が落ちないように、縦の隙間も高さ依存で */
    row-gap: clamp(16px, 4vh, 40px);
}

/* 見出し（h1）— 高さ・幅のどちらにも依存して大きくなりすぎないよう制御 */
.recruit-hero__content h1,
.recruit-hero h1 {
    font-size: clamp(36px, min(9vw, 9vh), 96px);
    line-height: 1.1;
    margin-block-end: clamp(8px, 1.5vh, 16px);
}

/* リード文（本文）のサイズと行間 */
.recruit-hero__content .lead,
.recruit-hero__content p {
    font-size: clamp(14px, 2.2vw, 18px);
    line-height: 1.7;
    margin-block-end: clamp(12px, 1.5vh, 20px);
}

/* 採用情報ラベルのフォントサイズを独立制御 */
.recruit-hero__label {
    font-size: 2.5rem;
    /* 実績・特徴と同じサイズ */
    font-weight: 900;
    letter-spacing: 0.04em;
    margin-bottom: clamp(20px, 2.5vw, 32px);
}

/* CTA ボタンの上の間隔（広すぎず、狭すぎず） */
.recruit-hero__content .btn,
.recruit-hero__content [role="button"],
.recruit-hero__content a.button {
    justify-self: start;
    /* 左寄せのまま */
    margin-top: clamp(12px, 2.5vh, 24px);
}

/* ===== 画面の縦が短い場合の微調整（例：ラップトップや分割表示） ===== */
@media (max-height: 900px) {
    .recruit-hero__inner {
        gap: clamp(12px, 3vh, 32px);
    }

    .recruit-hero__content h1 {
        font-size: clamp(34px, min(8.2vw, 8.2vh), 84px);
    }
}

@media (max-height: 800px) {
    .recruit-hero__inner {
        gap: clamp(8px, 2.5vh, 28px);
    }

    .recruit-hero__content h1 {
        font-size: clamp(30px, min(7.2vw, 7.2vh), 76px);
    }
}

@media (max-height: 700px) {
    .recruit-hero__inner {
        gap: clamp(6px, 2vh, 20px);
    }

    .recruit-hero__content h1 {
        font-size: clamp(28px, min(6.5vw, 6.5vh), 68px);
    }
}

/* ===== /Recruit Hero: make CTA always visible in one viewport ===== */

/* ===============================
RecruitHero Section: 参考画像通りに再現
=============================== */

/* RecruitHero Section 基本スタイル */
.recruitHero {
    background: #fff;
    padding: clamp(64px, 9vw, 96px) 0 clamp(80px, 12vw, 120px) 0;
}

.recruitHero__inner {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 clamp(16px, 3vw, 24px);
    display: grid;
    grid-template-columns: 1fr auto;
    column-gap: 40px;
    align-items: center;
}

/* テキスト側スタイル */
.recruitHero__text {
    max-width: 820px;
    padding-right: 40px;
}

.recruitHero__label {
    font-size: 37px;
    font-weight: 800;
    color: var(--accent);
    margin-bottom: clamp(8px, 1vw, 12px);
    text-transform: uppercase;
}

.recruitHero__copyTitle {
    display: block;
    font-size: clamp(28px, 4.2vw, 34px);
    font-weight: 700;
    line-height: 1.2;
    color: var(--ink);
    margin-bottom: clamp(16px, 2vw, 24px);
}

.recruitHero__copyLead {
    font-size: clamp(16px, 2vw, 15px);
    line-height: 1.7;
    color: var(--muted);
    margin-bottom: clamp(24px, 3vw, 32px);
    font-weight: 500;
}

.recruitHero__cta {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}

/* 円形マスク画像 */
.recruitHero__media {
    position: relative;
    translate: calc(8% + 24px) 0;
    margin-right: -24px;
    /* 右端の隙間を完全に埋める */
}

.recruitHero__mediaCircleMask {
    position: relative;
    width: clamp(700px, 44vw, 800px);
    height: clamp(320px, 30vw, 440px);
    border-radius: 9999px 0 0 9999px;
    overflow: hidden;
    background: #000;
    isolation: isolate;
    outline: 1px solid transparent;
}

.recruitHero__mediaCircleMask::before {
    content: "";
    position: absolute;
    top: 0;
    left: -2px;
    width: 4px;
    height: 100%;
    background: #fff;
    z-index: 2;
    pointer-events: none;
}

/* スライダー構造 */
.heroSlider,
.heroSlider__track,
.heroSlider__slide {
    height: 100%;
}

.heroSlider__track {
    display: flex;
    width: 200%;
    animation: slide-infinite 20s linear infinite;
    will-change: transform;
    transform: translateZ(0);
}

.heroSlider__slide {
    position: relative;
    /* 6枚（前半3＋後半3）でトラックの100%を満たす → 半分(3枚)で-50%移動と一致 */
    width: calc(100% / 6);
    flex-shrink: 0;
}

.heroSlider__slide>img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transform: translateZ(0);
    backface-visibility: hidden;
}

/* スライダーは流れ続けるのみ：個別画像の自動切替演出を抑止（デザイン不変） */
.recruitHero__media .heroSlider__slide>img {
    animation: none !important;
    transition: none !important;
    opacity: 1 !important;
}

/* デバウンス：このセクション内では data-ani のフェード演出を無効化（スライダー干渉回避） */
.recruitHero__media [data-ani] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
}

/* 無限スライドアニメーション */
@keyframes slide-infinite {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-50%);
    }
}

/* ================================
Recruit Hero heroSlider 無限マルキー
既存の slide-infinite を Recruit Hero 内だけ上書きして
常に一定速度で流れ続けるマルキーにする（PC/モバイル共通）
================================ */
.recruitHero .heroSlider {
    overflow: hidden;
    width: 100%;
    height: 100%;
}

.recruitHero .heroSlider__track {
    display: flex;
    width: max-content;
    min-width: 100%;
    animation: recruitHeroMarqueeLoop 40s linear infinite !important;
    will-change: transform;
}

.recruitHero .heroSlider__slide {
    flex: 0 0 auto;
    width: auto;
}

.recruitHero .heroSlider__slide>img {
    display: block;
    width: auto;
    height: 100%;
    object-fit: cover;
}

@keyframes recruitHeroMarqueeLoop {
    0% {
        transform: translateX(0);
    }

    100% {
        /* 1,2,3,1,2,3 構成の半分（3枚分）だけ流すと継ぎ目が一致 */
        transform: translateX(-50%);
    }
}

/* レスポンシブ対応 */
@media (max-width: 1200px) {
    .recruitHero__inner {
        grid-template-columns: 55% 37%;
        padding-left: 40px;
    }
}

@media (max-width: 1024px) {
    .recruitHero__media {
        translate: calc(5% + 24px) 0;
        margin-right: -24px;
        /* 右端の隙間を完全に埋める */
    }
}

@media (max-width: 960px) {
    .recruitHero__inner {
        grid-template-columns: 1fr;
        gap: 32px;
    }
}

@media (max-width: 768px) {
    .recruitHero__inner {
        grid-template-columns: 1fr;
        column-gap: 0;
        row-gap: 32px;
    }

    .recruitHero__text {
        padding-right: 0;
        text-align: center;
    }

    .recruitHero__media {
        translate: 0;
        order: 2;
        margin-right: 0;
        /* モバイルでは右端の隙間埋めを解除 */
    }

    .recruitHero__mediaCircleMask {
        width: 88vw;
        height: auto;
        aspect-ratio: 4/3;
        margin-top: 32px;
        border-radius: 9999px;
    }
}

/* ===============================
Hero Section: 参考画像通りに再現
=============================== */

/* CSSカスタムプロパティ */
:root {
    --hero-maxw: 1200px;
    --hero-gap-x: clamp(20px, 5vw, 60px);
    --hero-circle: clamp(520px, 48vw, 820px);
    --hero-title-size: clamp(28px, 5.2vw, 72px);
    --hero-lead-size: clamp(14px, 1.5vw, 18px);
    --hero-line-height-tight: 1.12;
    --hero-letter-tight: -0.02em;
}

/* Hero Section 基本スタイル */
.hero {
    background: #fff;
    padding: clamp(64px, 9vw, 96px) 0 clamp(80px, 12vw, 120px) 0;
}

.hero__inner {
    max-width: var(--hero-maxw);
    margin: 0 auto;
    padding: 0 var(--hero-gap-x);
    display: grid;
    grid-template-columns: 1fr minmax(420px, 0.95fr);
    align-items: center;
    gap: clamp(24px, 4vw, 48px);
}

.hero__text {
    min-width: 0;
}

.hero__title {
    font-family: "Noto Sans JP", system-ui, sans-serif;
    font-weight: 800;
    font-size: var(--hero-title-size);
    line-height: var(--hero-line-height-tight);
    letter-spacing: var(--hero-letter-tight);
    color: #0b0b0b;
    margin: 0 0 28px;
}

.hero__lead {
    font-family: "Noto Sans JP", system-ui, sans-serif;
    font-weight: 400;
    font-size: var(--hero-lead-size);
    line-height: 1.9;
    color: #2a2a2a;
    margin: 0 0 36px;
}

.hero__cta {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}

/* 円形マスク画像 */
.hero__media {
    position: relative;
    min-height: 320px;
    contain: paint;
}

.hero__mediaCircleMask {
    position: relative;
    width: var(--hero-circle);
    height: var(--hero-circle);
    border-radius: 9999px;
    overflow: hidden;
    margin-left: auto;
    translate: 8% 0;
    background: #000;
    isolation: isolate;
    outline: 1px solid transparent;
}

.hero__mediaCircleMask::before {
    content: "";
    position: absolute;
    top: 0;
    left: -2px;
    width: 4px;
    height: 100%;
    background: #fff;
    z-index: 2;
    pointer-events: none;
}

/* スライダー構造 */
.heroSlider,
.heroSlider__track,
.heroSlider__slide {
    height: 100%;
}

.heroSlider__track {
    display: flex;
    width: 200%;
    animation: slide-infinite 20s linear infinite;
}

.heroSlider__slide {
    position: relative;
    width: 33.333%;
    flex-shrink: 0;
}

.heroSlider__slide>img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transform: translateZ(0);
    backface-visibility: hidden;
}

/* 無限スライドアニメーション */
@keyframes slide-infinite {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-50%);
    }
}

/* レスポンシブ対応 */
@media (max-width: 1024px) {
    :root {
        --hero-circle: clamp(440px, 62vw, 680px);
    }

    .hero__inner {
        grid-template-columns: 1fr;
        padding: 0 var(--hero-gap-x);
    }

    .hero__media {
        order: -1;
        margin-bottom: 28px;
    }

    .hero__mediaCircleMask {
        margin: 0 auto;
        translate: 0 0;
    }
}

/* (removed desktop-wide edge flush per request) */

/* Desktop wide (≥1501px): (reverted as requested) */

/* REVERTED: recruit hero wide change (will be re-added per latest spec) */

@media (max-width: 768px) {
    :root {
        --hero-circle: min(86vw, 560px);
    }

    .hero__title {
        letter-spacing: -0.015em;
    }
}

/* ===============================
採用情報セクション 微調整
=============================== */

/* （旧）Recruit Hero: 1501px以上で左テキストのみ拡大
   → 新しいスケール仕様により削除 */

/* =========================================
Recruit Hero: マスク拡張CSS削除（元の固定デザインに復元）
========================================= */

/* =========================================
Recruit Hero: フル幅化CSS削除（元の固定デザインに復元）
========================================= */

/* ================================
Recruit Hero: translateX移動CSS削除（元の固定デザインに復元）
================================ */

/* （旧）Recruit Hero text width lock（1500pxの見出し改行を1501px以上でも固定）
   およびマスク位置調整は新しいスケール仕様により削除 */

/* ================================
Recruit Hero heroSlider 無限マルキー
既存のslide-infiniteを上書きして途切れないループに
================================ */
@media (min-width: 1001px) {
    .recruitHero .heroSlider {
        overflow: hidden;
        width: 100%;
        height: 100%;
    }

    .recruitHero .heroSlider__track {
        display: flex;
        width: max-content;
        /* 既存のslide-infiniteを上書き */
        animation: recruitHeroMarqueeLoop 40s linear infinite !important;
        will-change: transform;
        transform: translateZ(0);
    }

    .recruitHero .heroSlider__slide {
        flex: 0 0 auto;
        position: relative;
    }

    .recruitHero .heroSlider__slide img {
        display: block;
        width: auto;
        height: 100%;
        object-fit: cover;
        transform: translateZ(0);
        backface-visibility: hidden;
    }
}

@keyframes recruitHeroMarqueeLoop {
    0% {
        transform: translateX(0);
    }

    100% {
        /* トラック幅のちょうど半分だけ左に流す */
        transform: translateX(-50%);
    }
}

/* ========== 採用ラベルを少し大きく ========== */
.recruit-label,
.hero__side-vertical[aria-label="採用情報"],
.hero .recruit-label {
    font-size: clamp(24px, 2.4vw, 32px);
    /* +2〜4px相当 */
    font-weight: 900;
    letter-spacing: 0.04em;
    line-height: 1.2;
    margin-bottom: clamp(18px, 2vw, 24px);
}

/* ========== 大見出しを少し小さく ========== */
.recruit-title,
.hero__title,
.recruit-hero__title {
    font-size: clamp(36px, 4.2vw, 52px);
    /* 以前より一段だけ控えめ */
    line-height: 1.22;
    letter-spacing: -0.01em;
    margin-bottom: clamp(14px, 1.6vw, 20px);
}

/* ========== 右の写真ブロック：添付画像と完全一致するサイズと位置 ========== */
.recruit-visual,
.hero-visual,
.recruit-hero__col--visual {
    width: min(65vw, 1000px);
    /* 添付画像通りのサイズ */
    margin-left: clamp(-80px, -8vw, -120px);
    /* 適度な食い込み */
    align-self: center;
}

/* 丸みの"形そのまま"を保証：高さ依存の半円カーブを強制 */
.recruit-mask,
.hero-visual__mask {
    overflow: hidden;
    /* 左側だけを大きく丸める（高さに追従する半円） */
    border-radius: 9999px 0 0 9999px / 50% 0 0 50%;
    /* 既存の丸み指定があっても上書きで形を固定 */
    -webkit-mask-image: none;
    mask-image: none;
    clip-path: none;
    min-height: clamp(440px, 46vw, 520px);
    /* 既存の高さ感は維持 */
}

/* 内部メディアはこれまで通り */
.recruit-mask img,
.recruit-mask video,
.hero-visual__mask img,
.hero-visual__mask video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/* ========== レスポンシブ（崩れ防止の最小限） ========== */
@media (max-width: 1024px) {

    .recruit-visual,
    .hero-visual,
    .recruit-hero__col--visual {
        width: min(64vw, 760px);
        margin-left: clamp(-36px, -4vw, -64px);
    }

    .recruit-title,
    .hero__title,
    .recruit-hero__title {
        font-size: clamp(32px, 5vw, 44px);
    }
}

@media (max-width: 640px) {

    .recruit-visual,
    .hero-visual,
    .recruit-hero__col--visual {
        width: 100%;
        margin-left: 0;
    }

    .recruit-mask,
    .hero-visual__mask {
        border-radius: 28px;
        /* モバイルは矩形寄りで安全 */
    }
}

/* 見出し「自分の人生を本気でぶち上げ…」のフォントを少し小さく */
.recruit-hero__title {
    font-size: clamp(36px, 4vw, 48px) !important;
    line-height: 1.25 !important;
    font-weight: 900 !important;
    letter-spacing: -0.01em !important;
    margin-bottom: clamp(16px, 1.8vw, 24px) !important;
}

/* 右側の写真部分を少し長く（楕円形のまま拡張） */
.recruit-hero__col--visual {
    width: min(60vw, 880px) !important;
    /* 元より約5%広げる */
    margin-left: clamp(-70px, -7vw, -120px) !important;
}

/* pill-visualの形状を添付画像と完全一致させる（基本スタイルで統一済み） */

/* レスポンシブ時の調整（形崩れ防止） */
@media (max-width: 1024px) {
    .recruit-hero__col--visual {
        width: min(64vw, 720px) !important;
        margin-left: clamp(-40px, -5vw, -80px) !important;
    }

    /* 基本スタイルで統一済み */
}

@media (max-width: 640px) {
    .recruit-hero__col--visual {
        width: 100% !important;
        margin-left: 0 !important;
    }

    /* 基本スタイルで統一済み */
}

/* ===============================
採用情報セクション 微調整
=============================== */

/* ========================================
   SP幅（〜768px）での .recruitHero セクション調整
   写真の下の余白を縮めて、1画面に収まりやすくする
   ======================================== */
@media (max-width: 768px) {

    /* セクション全体の下paddingを縮める */
    .recruitHero {
        padding: 40px 0 24px 0 !important;
        /* 上 右 下 左 - 写真の下の余白を24pxに */
    }

    /* 内側のgapをSPだけ小さくする */
    .recruitHero__inner {
        row-gap: 20px !important;
    }

    /* リード文のmargin-bottomをSP時だけ小さくする */
    .recruitHero__copyLead {
        margin-bottom: 16px !important;
    }

    /* CTAグループの上マージンを調整 */
    .recruitHero__cta {
        margin-top: 16px !important;
    }

    /* 写真ブロックの縦サイズと上マージンを調整 */
    .recruitHero__mediaCircleMask {
        aspect-ratio: 16/9 !important;
        margin-top: 24px !important;
        max-height: 240px !important;
        /* 260px → 240pxに縮小 */
    }
}

/* 480px以下でさらに微調整 */
@media (max-width: 480px) {
    .recruitHero {
        padding-top: 32px !important;
        padding-bottom: 20px !important;
        /* 28px → 20pxに縮小 */
    }

    .recruitHero__inner {
        row-gap: 16px !important;
    }

    .recruitHero__copyLead {
        margin-bottom: 12px !important;
    }

    .recruitHero__cta {
        margin-top: 12px !important;
    }

    .recruitHero__mediaCircleMask {
        margin-top: 20px !important;
        max-height: 220px !important;
        /* 240px → 220pxに縮小 */
    }
}

/* （旧）FIX: recruitHero 画像右端の白余白対策（1508px以上のみ）
   → 新しいスケール仕様により不要 */

/* ========================================
   Recruit Hero: 1501〜2000px で
   1500pxレイアウトを等倍スケール拡大
   ======================================== */
@media (min-width: 1501px) and (max-width: 2000px) {

    /* セクションを画面中央に */
    .recruitHero {
        min-height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
    }

    /* 1500px のレイアウトを丸ごとキャンバス化して拡大 */
    .recruitHero__inner {
        width: 1500px;
        max-width: 1500px;
        padding: 0 clamp(16px, 3vw, 24px);
        transform-origin: top center;
        transform: scale(calc(100vw / 1500));
    }

    /* テキストブロックの過去の上書きをリセット */
    .recruitHero__text {
        width: auto !important;
        max-width: 820px !important;
        flex: none !important;
        transform: none !important;
    }
}

@media (min-width: 1501px) and (max-width: 2000px) {
    .recruitHero__mediaCircleMask {
        position: relative;
        right: -6px !important;
        /* 右端の白い隙間を完全に消すため、-6px に微調整 */
    }

    .recruitHero__media {
        position: relative;
        right: -6px !important;
        /* 同上 */
    }
}

/* =========================================
   RecruitHero: 300〜559px 専用レイアウト調整
   ・画像の形をキープ
   ・縦中央寄せに近づける
   ・下の余白削減
   ・背景を常にホワイトに
   ========================================= */
@media (min-width: 300px) and (max-width: 559px) {

    /* セクション全体：高さ過多 & グレー対策 */
    .recruitHero {
        /* 100vh ベースだと下だけスカスカになるので解除 */
        min-height: auto !important;
        /* パディングをやや抑えめ＆上下バランス調整 */
        padding: 40px 0 32px 0 !important;
        /* 常に白背景 */
        background: #ffffff !important;
        /* スマホでは flex の意味がほぼないので block に戻す */
        display: block !important;
    }

    /* 内側のグリッド：1カラム & 中央寄せ */
    .recruitHero__inner {
        max-width: 100% !important;
        padding-inline: 16px !important;
        grid-template-columns: 1fr !important;
        row-gap: 24px !important;
        align-items: center !important;
        justify-items: center !important;
    }

    /* テキストは幅を詰めすぎない程度に中央寄せ */
    .recruitHero__text {
        max-width: 360px !important;
        padding-right: 0 !important;
        text-align: left !important;
        margin: 0 auto !important;
    }

    /* 画像コンテナ：セクション中央に配置 */
    .recruitHero__media {
        order: 2 !important;
        translate: 0 0 !important;
        margin: 16px auto 0 auto !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        width: 100% !important;
    }

    /* マスク本体：形が潰れないように固定サイズ＋aspect-ratio */
    .recruitHero__mediaCircleMask {
        width: min(340px, 88vw) !important;
        /* 高さはアスペクト比で決定 */
        height: auto !important;
        aspect-ratio: 4 / 3 !important;
        border-radius: 9999px !important;
        overflow: hidden !important;
        margin: 0 auto !important;
        /* 以前付けた max-height 制限を打ち消す */
        max-height: none !important;
    }

    /* スライダー内部もマスクの高さにフィットさせる */
    .recruitHero__mediaCircleMask .heroSlider,
    .recruitHero__mediaCircleMask .heroSlider__track,
    .recruitHero__mediaCircleMask .heroSlider__slide {
        height: 100% !important;
    }

    .recruitHero__mediaCircleMask .heroSlider__slide>img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
    }
}