@charset "UTF-8";

/* ==========================================================================
   採用情報ページ (Recruit) 専用スタイル
   ========================================================================== */

/* ベースリセット・全体設定 */
.page-recruit {
    background-color: #fff;
    /* グリッド背景（方眼紙風） */
    background-image:
        linear-gradient(to right, #EEF5FC 1px, transparent 1px),
        linear-gradient(to bottom, #EEF5FC 1px, transparent 1px);
    background-size: 50px 50px;
    font-family: "Noto Sans JP", sans-serif;
    overflow-x: hidden;
}

/* ==========================================================================
   FV（メインビジュアル）エリア
   ========================================================================== */
.recruit-fv {
    position: relative;
    padding-top: 350px;
    /* ヘッダーの高さ分＋余白 */
    padding-bottom: 100px;
    width: 100%;
    max-width: 1920px;
    margin: 0 auto;
}


/* --- 巨大テキスト（背景） --- */
.recruit-fv__bg-text-area {
    position: relative;
    top: 0;
    margin-top: -50px;
    left: 51.5%;
    transform: translateX(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    z-index: 0;
    pointer-events: none;
}

/* --- アニメーション導入部 --- */
.recruit-fv__anim-intro {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
    pointer-events: none;
}

.anim-slash {
    position: absolute;
    width: 6px;
    height: 160px;
    background-color: #1F61F7;
    transform: rotate(-45deg);
    clip-path: inset(0 0 100% 0);
    animation: slashAnim 3s cubic-bezier(0.77, 0, 0.175, 1) forwards;
}

.anim-char {
    position: absolute;
    font-size: 150px;
    font-family: 'CP Font', sans-serif;
    font-weight: 800;
    color: #1F61F7;
    opacity: 0;
}

.anim-char--left {
    transform: translate(-180px, 100px);
    animation: charLeftAnim 3s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}

.anim-char--right {
    transform: translate(180px, -100px);
    animation: charRightAnim 3s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}

.recruit-fv__bg-text {
    font-size: 200px;
    font-family: 'CP Font', sans-serif;
    font-weight: 800;
    color: transparent;
    white-space: nowrap;
    margin: 0;
    line-height: 1;
    transform: scale(0.8);
    letter-spacing: -0.5em;
    position: relative;
    z-index: -1;
    opacity: 0;
    /* 3秒間の初期アニメーションの後、25秒かけて無限ループするアニメーションを追加 */
    animation: mainTextAnim 3s forwards, loopTextRight 25s linear 3s infinite;
}

/* 途切れないループアニメーション用の疑似要素（前後に追加） */
.recruit-fv__bg-text::before,
.recruit-fv__bg-text::after {
    content: "とにかく広告が好き！";
    position: absolute;
    top: 0;
    color: inherit;
}

.recruit-fv__bg-text::before {
    /* 「！」自体の右側にある見えない余白（全角スペース）を相殺するため、マイナス方向に寄せる */
    left: calc(-100% + 40px);
}

.recruit-fv__bg-text::after {
    left: calc(100% - 40px);
}

/* 左から右へ常に流れるアニメーション */
@keyframes loopTextRight {
    0% {
        transform: scale(1) translateX(0);
    }

    100% {
        transform: scale(1) translateX(calc(100% - 40px));
    }
}

.recruit-fv__bg-text-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 48px;
    font-family: 'CP Font', sans-serif;
    color: #1F61F7;
    margin: 0;
    white-space: nowrap;
    opacity: 0;
    animation: overlayTextAnim 3s forwards;
}

@keyframes slashAnim {
    0% {
        clip-path: inset(0 0 100% 0);
        opacity: 1;
    }

    15% {
        clip-path: inset(0 0 0 0);
        opacity: 1;
    }

    60% {
        clip-path: inset(0 0 0 0);
        opacity: 1;
    }

    70% {
        clip-path: inset(100% 0 0 0);
        opacity: 1;
    }

    71%,
    100% {
        clip-path: inset(100% 0 0 0);
        opacity: 0;
    }
}

@keyframes charLeftAnim {

    0%,
    15% {
        opacity: 0;
        transform: translate(-180px, 100px);
    }

    35%,
    58% {
        opacity: 1;
        transform: translate(-180px, 0);
    }

    61%,
    100% {
        opacity: 0;
        transform: translate(-180px, -100px);
    }
}

@keyframes charRightAnim {

    0%,
    15% {
        opacity: 0;
        transform: translate(180px, -100px);
    }

    35%,
    58% {
        opacity: 1;
        transform: translate(180px, 0);
    }

    61%,
    100% {
        opacity: 0;
        transform: translate(180px, 100px);
    }
}

@keyframes mainTextAnim {

    0%,
    60% {
        color: transparent;
        opacity: 0;
        transform: scale(0.8);
        letter-spacing: -0.5em;
    }

    61% {
        color: #E2EBFF;
        animation-timing-function: cubic-bezier(0.2, 0.8, 0.2, 1);
    }

    85%,
    100% {
        color: #E2EBFF;
        opacity: 1;
        transform: scale(1);
        letter-spacing: 0;
    }
}

@keyframes overlayTextAnim {

    0%,
    65% {
        opacity: 0;
    }

    70%,
    100% {
        opacity: 1;
    }
}

/* 濃い青テキスト（一文字ずつ跳ねるアニメーション） */
.recruit-fv__bg-text-overlay span {
    display: inline-block;
    animation: bounceChar 3s infinite;
}

/* 各文字に0.1秒ずつ遅延をつける（最初の登場アニメーション3秒を考慮し、3秒後からスタート） */
.recruit-fv__bg-text-overlay span:nth-child(1) {
    animation-delay: 3.0s;
}

.recruit-fv__bg-text-overlay span:nth-child(2) {
    animation-delay: 3.1s;
}

.recruit-fv__bg-text-overlay span:nth-child(3) {
    animation-delay: 3.2s;
}

.recruit-fv__bg-text-overlay span:nth-child(4) {
    animation-delay: 3.3s;
}

.recruit-fv__bg-text-overlay span:nth-child(5) {
    animation-delay: 3.4s;
}

.recruit-fv__bg-text-overlay span:nth-child(6) {
    animation-delay: 3.5s;
}

.recruit-fv__bg-text-overlay span:nth-child(7) {
    animation-delay: 3.6s;
}

.recruit-fv__bg-text-overlay span:nth-child(8) {
    animation-delay: 3.7s;
}

.recruit-fv__bg-text-overlay span:nth-child(9) {
    animation-delay: 3.8s;
}

.recruit-fv__bg-text-overlay span:nth-child(10) {
    animation-delay: 3.9s;
}

@keyframes bounceChar {

    0%,
    15%,
    100% {
        transform: translateY(0);
    }

    7.5% {
        transform: translateY(-15px);
    }
}

/* --- コピーテキスト --- */
.recruit-fv__copy-inner {
    position: relative;
    z-index: 3;
    text-align: center;
    margin-top: 60px;
    margin-bottom: 60px;
}

.recruit-fv__title {
    font-size: 3rem;
    font-weight: 900;
    color: #003B90;
    margin-bottom: 20px;
    position: relative;
    display: inline-block;
}

.recruit-fv__title-exclamation {
    color: #FF4A11;
}

/* テキスト下の波線（疑似要素） */
.recruit-fv__title::after {
    content: "";
    position: absolute;
    bottom: -10px;
    left: 0;
    width: 100%;
    height: 6px;
    background: radial-gradient(circle at 10px 0px, transparent 8px, #FFC000 9px, #FFC000 10px, transparent 11px) 0 0 / 20px 10px repeat-x,
        radial-gradient(circle at 10px 10px, transparent 8px, #FFC000 9px, #FFC000 10px, transparent 11px) 10px -5px / 20px 10px repeat-x;
}

.recruit-fv__desc {
    font-size: 1rem;
    line-height: 2;
    font-weight: 700;
    color: #333;
}

.recruit-fv__desc .blue {
    color: #003B90;
}

.recruit-fv__desc .orange {
    color: #FF4A11;
}

.recruit-fv__desc-q {
    font-size: 24px;
    color: #1F61F7;
}

.recruit-fv__desc-ex {
    font-size: 24px;
    color: #FF5A1C;
}

/* --- メイン写真（削除中） --- */
.recruit-fv__photo-wrap {
    position: relative;
    z-index: 3;
    width: 80%;
    max-width: 1200px;
    margin: 0 auto;
}

.recruit-fv__photo {
    width: 100%;
    height: auto;
    display: block;
    filter: grayscale(100%);
    /* モノクロ化 */
}

/* --- 写真に代わるFVボタンエリア --- */
.recruit-fv__buttons-wrap {
    position: relative;
    z-index: 4;
    width: 80%;
    max-width: 650px;
    margin: 0 auto; /* copy-innerのmargin-bottomがあるのでautoのみでOK */
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.recruit-fv__buttons-row {
    display: flex;
    gap: 20px;
    width: 100%;
}

.recruit-fv__btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    color: #fff;
    font-size: 1.1rem;
    font-weight: 700;
    text-decoration: none;
    border-radius: 10px;
    border: 1px solid #000; /* 1pxの黒い線を追加 */
    position: relative;
    transition: transform 0.3s ease, box-shadow 0.3s ease, filter 0.3s ease;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
}

.recruit-fv__btn:hover {
    transform: translateY(-3px);
    filter: brightness(1.1);
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.25);
    color: #fff;
}

.recruit-fv__btn--new {
    background-color: #1F61F7;
}

.recruit-fv__btn--mid {
    background-color: #FF5A1C;
}

.recruit-fv__btn-text {
    position: relative;
    z-index: 2;
    letter-spacing: 0.1em;
}

.recruit-fv__btn-icon {
    position: absolute;
    right: 20px;
    top: 50%;
    margin-top: -2px; /* 線の太さ分の補正 */
    transform: translateY(-50%) rotate(45deg);
    width: 8px;
    height: 8px;
    border-top: 2px solid #fff;
    border-right: 2px solid #fff;
}

.recruit-fv__mynavi {
    width: 100%;
    border: 1px solid #000; /* 1pxの黒い線を追加 */
}


/* ==========================================================================
   募集要項エリア
   ========================================================================== */
.recruit-jobs {
    position: relative;
    z-index: 3;
    padding-top: 100px;
    padding-bottom: 150px;
    background-color: #E4F0FE;
}



.recruit-jobs__title-text {
    position: absolute;
    left: calc(200 / 1920 * 100vw);
    top: 100px;
    font-size: 14px;
    color: #1F61F7;
    font-weight: 500;
    letter-spacing: 0.2em;
    z-index: 2;
}

.recruit-jobs__title-line {
    position: absolute;
    left: 0;
    top: 136px;
    width: calc(400 / 1920 * 100vw);
    /* 会社概要(section5)と同じ長さに変更 */
    height: 1px;
    border-bottom: 1px dashed #1F61F7;
    z-index: 2;
}

/* 募集要項（中央の大きなタイトル） */
.recruit-jobs__main-title-wrap {
    text-align: center;
    margin-bottom: 60px;
}

.recruit-jobs__main-title {
    font-family: 'CP Font', sans-serif;
    font-size: 3rem;
    font-weight: 900;
    color: #1F61F7;
    letter-spacing: 0.3em;
    margin-left: 0.3em;
    /* 中央揃えの補正 */
}

.recruit-jobs__inner {
    width: 95%;
    max-width: 1520px;
    margin: 0 auto;
    display: flex;
    align-items: flex-start;
    /* 左タブを右の白カードと上辺で揃える */
}

/* --- 左サイドバー（タブブロック） --- */
.recruit-jobs__sidebar {
    width: 412px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    position: relative;
    z-index: 10;
    border: 1px solid #000;
    border-right: none;
    border-radius: 20px 0 0 20px;
    /* 左上・左下の角丸を復元 */
    overflow: hidden;
    /* ブロックの角丸を親で制御 */
}

.recruit-jobs__block {
    height: 327px;
    /* 高さを327pxに変更 */
    padding: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    /* コンテンツを縦中央に配置し、上下の余白を均等にする */
}

.recruit-jobs__block--new {
    background-color: #1F61F7;
    border-radius: 0;
}

.recruit-jobs__block--mid {
    background-color: #FF5A1C;
    border-radius: 0;
    border-top: 1px solid #000;
    /* 新卒・経験者ブロック間の境界線 */
    border-bottom: 1px solid #000;
    /* 下の余白との境界線 */
}

/* マイナビボタンエリア（経験者採用ブロックの下余白） */
.recruit-jobs__mynavi {
    flex: 1;
    /* 余った高さを埋める */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px 30px;
    background-color: #f8f9fa;
    /* うっすらグレーにして区別 */
}

.mynavi-btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    background: linear-gradient(135deg, #00A0E9 0%, #0078D7 100%);
    color: #fff;
    padding: 15px 25px;
    border-radius: 10px;
    text-decoration: none;
    box-shadow: 0 4px 10px rgba(0, 160, 233, 0.3);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    /* テカリ演出用 */
    position: relative;
    overflow: hidden;
}

/* テカリ（シャイン）のエフェクト部分 */
.mynavi-btn::before {
    content: "";
    position: absolute;
    top: 0;
    left: -150%;
    width: 50%;
    height: 100%;
    background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.5) 50%, rgba(255, 255, 255, 0) 100%);
    transform: skewX(-25deg);
    z-index: 1;
}

.mynavi-btn:hover::before {
    animation: shine 0.75s ease-in-out;
}

@keyframes shine {
    100% {
        left: 200%;
    }
}

.mynavi-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 15px rgba(0, 160, 233, 0.4);
    color: #fff;
}

.mynavi-btn__text {
    font-size: 0.95rem;
    font-weight: 700;
    line-height: 1.6;
    letter-spacing: 0.05em;
    position: relative;
    z-index: 2;
    /* テカリより前面に出す */
}

.mynavi-btn__icon {
    width: 26px;
    height: 26px;
    background-color: #fff;
    border-radius: 50%;
    position: relative;
    flex-shrink: 0;
    margin-left: 15px;
    z-index: 2;
    /* テカリより前面に出す */
}

.mynavi-btn__icon::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 45%;
    transform: translate(-50%, -50%) rotate(45deg);
    width: 6px;
    height: 6px;
    border-top: 2px solid #00A0E9;
    border-right: 2px solid #00A0E9;
}

/* カテゴリの白箱 */
.recruit-jobs__category-box {
    background-color: #fff;
    margin: 0 0 30px 60px;
    /* 上マージンを消し、justify-content: centerに任せる */
    width: 160px;
    padding: 8px 0;
    text-align: center;
}

.recruit-jobs__category {
    font-size: 1.1rem;
    font-weight: 900;
    letter-spacing: 0.2em;
    margin: 0;
    margin-left: 0.2em;
    /* 中央補正 */
}

.recruit-jobs__block--new .recruit-jobs__category {
    color: #1F61F7;
}

.recruit-jobs__block--mid .recruit-jobs__category {
    color: #FF5A1C;
}

/* タブリスト */
.recruit-jobs__tabs {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 25px;
}

.recruit-jobs__tab {
    position: relative;
    color: #fff;
    padding-left: 95px;
    /* テキスト開始位置の調整 */
    font-weight: 700;
    font-size: 0.95rem;
    letter-spacing: 0.15em;
    cursor: pointer;
    transition: opacity 0.3s ease;
}

.recruit-jobs__tab:hover {
    opacity: 0.8;
}

.tab-text {
    position: relative;
    z-index: 2;
}

/* タブの頭のアイコンエリア */
.tab-icon {
    position: absolute;
    left: 65px;
    top: 50%;
    margin-top: -6px;
    width: 12px;
    height: 12px;
    z-index: 2;
}

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

/* 非選択時の「＋」マーク（縦線と横線） */
.tab-icon::before {
    width: 12px;
    height: 2px;
}

.tab-icon::after {
    width: 2px;
    height: 12px;
}

/* 選択時のアイコンアニメーション（＋ -> × -> ■） */
.recruit-jobs__tab.is-active .tab-icon {
    animation: icon-rotate 0.6s forwards;
}

@keyframes icon-rotate {
    0% {
        transform: rotate(0deg);
    }

    40% {
        transform: rotate(45deg);
    }

    50% {
        transform: rotate(45deg);
    }

    /* 少しだけ×で待機 */
    70% {
        transform: rotate(90deg);
    }

    /* 素早く■の角度へ */
    100% {
        transform: rotate(90deg);
    }
}

/* 最後の回転中に線を拡張して正方形にする */
.recruit-jobs__tab.is-active .tab-icon::before {
    animation: icon-fill-h 0.12s 0.3s forwards;
    /* アニメーション時間を短縮、早く開始 */
}

.recruit-jobs__tab.is-active .tab-icon::after {
    animation: icon-fill-v 0.12s 0.3s forwards;
}

@keyframes icon-fill-h {
    0% {
        width: 12px;
        height: 2px;
    }

    100% {
        width: 12px;
        height: 12px;
    }
}

@keyframes icon-fill-v {
    0% {
        width: 2px;
        height: 12px;
    }

    100% {
        width: 12px;
        height: 12px;
    }
}

/* アニメーションする下線 */
.tab-line {
    position: absolute;
    left: 95px;
    /* テキストの左端に合わせる */
    bottom: -8px;
    /* テキストの下に配置 */
    width: 0;
    /* 初期状態は0 */
    height: 1px;
    background-color: #fff;
}

/* 先端のひし形（◆） */
.tab-line::after {
    content: "";
    position: absolute;
    right: -2px;
    /* 線の右端の中央に配置 */
    top: -1.5px;
    width: 4px;
    height: 4px;
    background-color: #fff;
    transform: rotate(45deg);
    opacity: 0;
}

/* 選択時の下線アニメーション（左から右へ引かれる） */
.recruit-jobs__tab.is-active .tab-line {
    animation: draw-line 0.4s 0.45s forwards;
    /* アイコン変化後、少し早めに開始 */
}

/* 線の描画に合わせてひし形を表示 */
.recruit-jobs__tab.is-active .tab-line::after {
    animation: show-diamond 0.1s 0.45s forwards;
}

@keyframes draw-line {
    0% {
        width: 0;
    }

    100% {
        width: calc(100% - 160px);
    }

    /* 30px短くする */
}

@keyframes show-diamond {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

/* --- 右コンテンツエリア --- */
.recruit-jobs__right-wrap {
    flex: 1;
    /* 左サイドバー以外の残りの幅をすべて取る */
    display: flex;
    flex-direction: column;
}

.recruit-jobs__content {
    background-color: #fff;
    min-height: 780px;
    border: 1px solid #000;
    border-radius: 0 20px 20px 20px;
    padding: 60px 70px;
    /* 元の余白に戻す */
    position: relative;
    z-index: 11;
}

/* --- エントリーシート ダウンロードエリア --- */
.recruit-entry-sheet {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    /* 右寄せに配置 */
    margin-top: 30px;
    padding-right: 20px;
}

.recruit-entry-sheet__text {
    font-size: 1rem;
    font-weight: 700;
    color: #1F61F7;
    margin-right: 20px;
}

.recruit-entry-sheet__buttons {
    display: flex;
    gap: 15px;
}

.entry-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 30px;
    background-color: #fff;
    border: 2px solid #1F61F7;
    border-radius: 8px;
    color: #1F61F7;
    font-size: 1rem;
    font-weight: 700;
    text-decoration: none;
    transition: all 0.3s ease;
}

.entry-btn:hover {
    background-color: #1F61F7;
    color: #fff;
}

.recruit-jobs__panel {
    display: none;
    animation: fadeIn 0.5s ease;
}

.recruit-jobs__panel.is-active {
    display: block;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* パネル内のバッジ */
.recruit-jobs__badges {
    display: flex;
    gap: 15px;
    margin-bottom: 40px;
}

.recruit-jobs__badge {
    color: #fff;
    padding: 6px 20px;
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.15em;
    border-radius: 4px;
}

.recruit-jobs__badge--new {
    background-color: #1F61F7;
}

.recruit-jobs__badge--mid {
    background-color: #FF5A1C;
    /* 経験者用はオレンジ */
}

/* テーブルスタイル */
.recruit-table {
    margin: 0;
    width: 100%;
}

.recruit-table__row {
    display: flex;
    border-bottom: 1px solid #999;
    padding: 25px 0;
}

.recruit-table__row:first-child {
    padding-top: 0;
    border-top: none;
}

.recruit-table__row:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.recruit-table__row dt {
    width: 130px;
    flex-shrink: 0;
    font-weight: 900;
    color: #000;
    text-align: justify;
    text-align-last: justify;
    margin-right: 40px;
    letter-spacing: 0.1em;
}

.recruit-table__row dd {
    flex: 1;
    margin: 0;
    color: #000;
    line-height: 1.8;
    font-size: 0.95rem;
}

/* ==========================================================================
   経営理念エリア
   ========================================================================== */
.recruit-philosophy {
    padding-bottom: 120px;
    width: 100%;
    position: relative;
    z-index: 3;
}

.recruit-philosophy__inner {
    width: auto;
    margin: 0 200px;
}

/* 上部（タイトル＋リード文） */
.recruit-philosophy__top {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 40px;
    margin-bottom: 60px;
}

/* タイトル（青い正方形ボックス） */
.recruit-philosophy__title {
    display: flex;
    gap: 12px;
    margin: 0;
}

.recruit-philosophy__title span {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 70px;
    height: 70px;
    background-color: #1F61F7;
    color: #fff;
    font-size: 32px;
    font-weight: 900;
    font-family: 'CP Font', sans-serif;
}

/* リード文 */
.recruit-philosophy__lead {
    font-size: 15px;
    line-height: 2;
    letter-spacing: 0.1em;
    font-weight: 500;
    color: #333;
    margin: 0;
    padding-top: 0;
    white-space: nowrap;
}

/* 下部メイン（2カラム構成） */
.recruit-philosophy__main {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 100px;
}

/* 左カラム：画像 */
.recruit-philosophy__img-wrap {
    flex: none;
    display: flex;
    justify-content: center;
}

.recruit-philosophy__img {
    width: 100%;
    max-width: 450px;
    /* 画像が大きくなりすぎないように制限 */
    height: auto;
    display: block;
}

/* 右カラム：テキスト */
.recruit-philosophy__content {
    flex: none;
    display: flex;
    justify-content: center;
}

.recruit-philosophy__content-inner {
    display: flex;
    flex-direction: column;
}

/* サブタイトル */
.recruit-philosophy__subtitle {
    font-size: 2rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    color: #333;
    margin-bottom: 30px;
}

/* リスト部分 */
.recruit-philosophy__list {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-bottom: 40px;
    padding: 0;
    list-style: none;
}

.recruit-philosophy__list li {
    display: flex;
    align-items: center;
    gap: 20px;
}

.recruit-philosophy__num {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 45px;
    height: 45px;
    background-color: #222;
    color: #fff;
    font-size: 24px;
    font-weight: 700;
    flex-shrink: 0;
}

.recruit-philosophy__text {
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: 0.15em;
    color: #222;
}

/* ボトム文 */
.recruit-philosophy__bottom {
    font-size: 16px;
    line-height: 2;
    letter-spacing: 0.1em;
    font-weight: 500;
    color: #333;
    white-space: nowrap;
}

/* ==========================================================================
   社員インタビューエリア
   ========================================================================== */
.recruit-interview {
    padding-bottom: 100px;
    width: 100%;
}

.recruit-interview__inner {
    width: 80%;
    max-width: 1300px;
    margin: 0 auto;
}

.recruit-interview__title-wrap {
    text-align: center;
    margin-bottom: 60px;
}

.recruit-interview__title-svg {
    height: 120px;
    width: auto;
    margin-bottom: 10px;
}

/* 線画要素 (パス) */
.recruit-interview__title-svg path {
    stroke-dasharray: var(--length, 1000px);
    stroke-dashoffset: var(--length, 1000px);
    opacity: 1;
}

/* ドット要素 */
.recruit-interview__title-svg circle.interview-dot {
    opacity: 0;
}

/* 発火時のアニメーション */
.recruit-interview__title-svg.is-visible path {
    animation: drawInterview var(--duration, 2s) ease-in-out var(--delay, 0s) forwards;
}

.recruit-interview__title-svg.is-visible circle.interview-dot {
    animation: fadeInDot 0.4s ease-in-out calc(var(--delay) + 0.05s) forwards;
}

@keyframes drawInterview {
    to {
        stroke-dashoffset: 0;
    }
}



.recruit-interview__subtitle {
    font-family: 'CP Font', sans-serif;
    font-size: 2.2rem;
    font-weight: 900;
    color: #1F61F7;
    letter-spacing: 0.15em;
}



.recruit-interview__list {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 40px;
}

.recruit-interview__card {
    position: relative;
    background-color: #fff;
    border-radius: 30px;
    border: 1px solid #333;
    padding: 40px 30px 30px;
    width: calc(33.333% - 27px);
    display: flex;
    flex-direction: column;
    box-shadow: 6px 6px 15px rgba(0, 0, 0, 0.15);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* ボタンをホバーした時にカード全体が浮き上がる設定 */
.recruit-interview__card:has(.recruit-interview__btn:hover) {
    transform: translateY(-10px);
    box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.2);
}

.recruit-interview__card--planning {
    border-bottom: 5px solid #FF4A11;
}

.recruit-interview__card--creative {
    border-bottom: 5px solid #1F61F7;
}

.recruit-interview__card--printing {
    border-bottom: 5px solid #F0FF1C;
}

/* Badge (Starburst) */
.recruit-interview__badge {
    position: absolute;
    top: -40px;
    left: -40px;
    width: 120px;
    height: 120px;
    z-index: 10;
}

/* インタビューカード右上のキャラクター */
.recruit-interview__character {
    position: absolute;
    top: -137px;
    right: -20px;
    width: 150px;
    height: auto;
    z-index: 20;
    pointer-events: none;
}

/* Image */
.recruit-interview__img {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    object-position: top;
    margin-bottom: 20px;
}

/* プロフィール */
.recruit-interview__profile {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 20px;
    /* 余白を均等に調整 */
}

.recruit-interview__dept {
    background-color: #1F61F7;
    /* Creative/Printingのデフォルト */
    color: #fff;
    font-size: 14px;
    font-weight: bold;
    padding: 6px 12px;
    border-radius: 4px;
}

.recruit-interview__dept--planning {
    background-color: #FF4A11;
    /* 営業部のオレンジ */
}

.recruit-interview__dept--printing {
    background-color: #F0FF1C;
    /* 生産管理部の黄色 */
    color: #1F61F7;
    /* 文字は青色 */
}

.recruit-interview__name {
    font-size: 20px;
    font-weight: bold;
    color: #333;
}

/* キャッチコピー */
.recruit-interview__catchphrase {
    font-size: 16px;
    font-weight: 700;
    color: #333;
    margin-bottom: 20px;
    /* 余白を均等に調整 */
    line-height: 1.5;
    min-height: 3em;
    /* 2行分の高さを確保し、カードサイズを揃える */
}

/* Image Placeholder (for other cards until replaced) */
.recruit-interview__img-placeholder {
    width: 100%;
    aspect-ratio: 1 / 1;
    background-color: #d9d9d9;
    margin-bottom: 25px;
}

/* 区切り線 */
.recruit-interview__line {
    width: 30px;
    height: 1px;
    background-color: #333;
    margin: 0 auto 25px;
}

/* Accordion Wrap */
.recruit-interview__text-wrap {
    display: grid;
    grid-template-rows: 0fr;
    opacity: 0;
    transition: grid-template-rows 0.6s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.5s ease-out;
}

.recruit-interview__text-wrap.is-open {
    grid-template-rows: 1fr;
    opacity: 1;
}

.recruit-interview__text-inner {
    overflow: hidden;
}

/* Text Content */
.recruit-interview__text {
    font-size: 0.85rem;
    line-height: 1.8;
    color: #000;
    font-weight: 500;
    margin: 0;
    padding-bottom: 25px;
    /* アニメーションのガタつき防止のためpaddingに変更 */
    text-align: justify;
}

/* Button */
.recruit-interview__btn {
    display: block;
    width: 100%;
    padding: 15px 0;
    text-align: center;
    font-family: "Noto Sans JP", sans-serif;
    font-size: 1rem;
    font-weight: 300;
    letter-spacing: 0.5em;
    border: 1px solid #000;
    text-decoration: none;
    transition: opacity 0.3s ease;
    margin-top: auto;
    cursor: pointer;
    background-color: transparent;
}

.recruit-interview__btn:hover {
    opacity: 0.8;
}

.recruit-interview__btn--planning {
    background-color: #FF4A11;
    color: #fff;
}

.recruit-interview__btn--creative {
    background-color: #1F61F7;
    color: #fff;
}

.recruit-interview__btn--printing {
    background-color: #F0FF1C;
    color: #1F61F7;
}

/* ==========================================================================
   選考の流れエリア
   ========================================================================== */
.recruit-flow {
    padding-top: 100px;
    padding-bottom: 100px;
    width: 100%;
}

.recruit-flow__inner {
    width: 80%;
    max-width: 1300px;
    margin: 0 auto;
}

.recruit-flow__title {
    font-size: 2.5rem;
    font-weight: 900;
    color: #1F61F7;
    text-align: center;
    letter-spacing: 0.3em;
    margin-bottom: 60px;
    font-family: 'CP Font', sans-serif;
}

.recruit-flow__list {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 40px;
    /* ボックス間の余白 */
    position: relative;
    z-index: 1;
    /* 線を背面に回すためのスタッキングコンテキスト */
}

.recruit-flow__item {
    display: flex;
    width: 100%;
    max-width: 1100px;
    min-height: 100px;
    /* 縦幅を縮小 */
    background-color: #fff;
    border: 1px solid #bbb;
    box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.05);
    border-radius: 20px;
    /* 角丸を追加 */
    overflow: hidden;
    /* 左の青い番号ボックスも角丸に沿わせる */
    /* スクロールアニメーションの初期状態 */
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

/* スクロールで表示された時の状態 */
.recruit-flow__item.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.recruit-flow__num {
    background-color: #1F61F7;
    color: #fff;
    width: 100px;
    /* 横幅を縮小 */
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8rem;
    /* フォントサイズも微調整 */
    font-weight: 900;
    font-family: 'CP Font', sans-serif;
}

.recruit-flow__content {
    display: flex;
    flex: 1;
    align-items: center;
    padding: 20px 30px;
    /* 上下左右の余白を狭めて間延びを解消 */
}

.recruit-flow__step-title {
    color: #1F61F7;
    font-size: 1.25rem;
    font-weight: 700;
    width: 5em;
    flex-shrink: 0;
    text-align: justify;
    text-align-last: justify;
    margin-right: 100px;
}

.recruit-flow__text {
    flex: 1;
    font-size: 0.95rem;
    line-height: 1.8;
    color: #000;
    font-weight: 500;
}

.recruit-flow__text p {
    margin: 0;
}

.recruit-flow__address-box {
    margin-top: 15px;
    display: flex;
    align-items: stretch;
}

.recruit-flow__address-head {
    background-color: #1F61F7;
    color: #fff;
    font-size: 0.85rem;
    font-weight: 700;
    padding: 5px 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
}

.recruit-flow__address-body {
    background-color: #E2EBFF;
    color: #000;
    font-size: 0.95rem;
    font-weight: 700;
    padding: 10px 20px;
    flex: 1;
}

/* 全体を貫く最背面の1本線 */
.recruit-flow__line {
    position: absolute;
    top: 0;
    bottom: 120px;
    /* 最後の6番ボックス（約100px+余白）の手前で止める */
    left: 50%;
    transform: translateX(-50%);
    width: 1px;
    z-index: -1;
    /* ボックスの最背面に配置 */
    /* 背景を使って線を上から下へ描画するアニメーション */
    background: linear-gradient(to bottom, #1F61F7 0%, #1F61F7 100%) no-repeat;
    background-size: 100% 0%;
    transition: background-size 1.5s ease-out;
    /* 全体を貫くため少し時間を長めに */
}

.recruit-flow__line.is-active {
    background-size: 100% 100%;
}

/* 一番下の先端につく1つだけのひし形 */
.recruit-flow__line::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%) rotate(45deg);
    width: 6px;
    height: 6px;
    background-color: #1F61F7;
    opacity: 0;
    transition: opacity 0.2s ease-out 1.5s;
    /* 線が伸びきった後に表示 */
}

.recruit-flow__line.is-active::after {
    opacity: 1;
}

/* ==========================================================================
   採用お問い合わせエリア
   ========================================================================== */
.recruit-contact {
    width: 100%;
    /* グラデーション */
    background: linear-gradient(135deg, #1F61F7 0%, #0d3690 100%);
    padding: 60px 0;
    color: #fff;
    position: relative;
    z-index: 2;
}

.recruit-contact__character-wrap {
    max-width: 1000px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
}

.recruit-contact__character {
    position: absolute;
    bottom: -95px;
    left: 5%;
    width: 200px;
    /* 元の横位置を保ったまま、上下にフワフワさせるアニメーションを適用 */
    animation: chara-float 2s ease-in-out infinite; /* 3sから2sに変更して少し早く */
}

@keyframes chara-float {
    0% {
        transform: translateX(-360px) translateY(0);
    }
    50% {
        transform: translateX(-360px) translateY(-8px); /* 15pxから8pxに変更して高さを抑える */
    }
    100% {
        transform: translateX(-360px) translateY(0);
    }
}

.recruit-contact__inner {
    max-width: 1000px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 50px;
}

.recruit-contact__title {
    font-size: 2.2rem;
    font-weight: 900;
    font-family: 'CP Font', sans-serif;
    letter-spacing: 0.4em;
    /* HTMLのスペースを削除しCSSのみで文字間を制御 */
}

.recruit-contact__divider {
    width: 4px;
    height: 60px;
    background-color: #fff;
    flex-shrink: 0;
}

.recruit-contact__info {
    font-size: 1rem;
    line-height: 1.8;
    font-weight: 500;
    letter-spacing: 0.05em;
}

.recruit-contact__info p {
    margin: 0;
}

.recruit-contact__info a {
    color: #fff;
    text-decoration: underline;
    transition: opacity 0.3s ease;
}

.recruit-contact__info a:hover {
    opacity: 0.7;
}

/* ==========================================================================
   追従するお問い合わせボタン
   ========================================================================== */
.floating-contact {
    position: fixed;
    right: 3vw;
    bottom: 90px;
    width: 192px;
    z-index: 100;
    display: block;
    transition: transform 0.3s ease;
}

.floating-contact:hover {
    transform: scale(1.05);
}

.floating-contact img {
    width: 100%;
    height: auto;
    display: block;
}