@charset "utf-8";



/*Font Awesomeの読み込み
---------------------------------------------------------------------------*/
@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css");


/*CSSカスタムプロパティ（careerサイト全体を一括管理する為の設定）
---------------------------------------------------------------------------*/
html {
    margin-top: 0 !important;
}

body {
    margin: 0 !important;
}

:root {
    font-family: Bahnschrift;
}

#wpadminbar {
    display: none !important;
}

.fa {
    font-size: small;
}



/* --- header-career.php --- 
---------------------------------------------------------------------------*/

/* header 全体の固定設定 */
.l-header-career {
    position: fixed;
    top: 5px;
    left: 0;
    z-index: 1000;
    /* 最も手前 */
    width: 100%;
    height: clamp(4.375rem, 2.375rem + 2.5vw, 5.375rem);
    background: rgba(255, 255, 255, 0.4);
    border-radius: 15px;
    display: flex;
    align-items: center;
    backdrop-filter: blur(10px);
}

.l-header-career__inner {
    width: 95%;
    max-width: 1280px;
    /* Figmaの最大幅 */
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.l-header-career__logo {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
}

.l-header-career__logo img {
    width: clamp(3.125rem, 1.875rem + 1.56vw, 3.75rem);
    height: clamp(3.125rem, 1.875rem + 1.56vw, 3.75rem);
}

.l-header-career__logo-text {
    color: #000;
    text-align: center;
    font-size: 12px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
}

/* ナビゲーションのレイアウト（PC用） */
.l-header-career__list {
    display: flex;
    gap: 15px;
    /* ボタン間の余白 */
    list-style: none;
}

/* 各種ボタンの共通スタイル */
.c-button-nav,
.c-button-entry {
    display: block;
    /* padding: 7px; */
    padding: 7px 0;
    min-width: 100px;
    border-radius: 8px;
    text-align: center;
    text-decoration: none;
    font-weight: bold;
    transition: opacity 0.3s;
}

.c-button-nav {
    background: #fff;
    color: #000;
}

.c-button-nav:hover {
    color: #ED7A90;
}

/* Entryボタン */
.c-button-entry {
    background: linear-gradient(90deg, #ff7eb3, #ff758c);
    color: #fff;
    padding: 12px 30px;
}

/* ハンバーガーメニュー */
.l-header-career__hamburger {
    display: block;
    position: relative;
    width: 30px;
    height: 24px;
    background: none;
    border: none;
    cursor: pointer;
    z-index: 1001;
    /* メニューより上に */
}

/* 3本線の共通設定 */
.l-header-career__hamburger span {
    display: block;
    position: absolute;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: #000;
    /* 線の色 */
    transition: all 0.3s ease-in-out;
}

/* 各線の位置 */
.l-header-career__hamburger span:nth-child(1) {
    top: 0;
}

.l-header-career__hamburger span:nth-child(2) {
    top: 11px;
}

.l-header-career__hamburger span:nth-child(3) {
    top: 22px;
}

/* ×印の時のアニメーション */
.l-header-career__hamburger.is-open span:nth-child(1) {
    transform: translateY(11px) rotate(45deg);
}

.l-header-career__hamburger.is-open span:nth-child(2) {
    opacity: 0;
    /* 真ん中の線を消す */
}

.l-header-career__hamburger.is-open span:nth-child(3) {
    transform: translateY(-11px) rotate(-45deg);
}



/* --- page-career.php --- 
---------------------------------------------------------------------------*/
/* レイアウトベース */
.l-container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 20px;
    /* スマホ時の端の余白 */
}

/* ヒーローエリア */
.p-career-hero {
    width: 100%;
    /* max-width: 1280px; */
    height: 100vh;
    margin: 0;
    /* マージンをリセット */
    /* Figma: linear-gradient(104deg, #FFF 4.37%, #E6003A 100%) */
    background: linear-gradient(104deg, #FFF 4.37%, #E6003A 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    /* 画面に固定する */
    top: 0;
    left: 0;
    z-index: 1;
    /* 一番奥 */
}

.p-career-hero__inner {
    width: 90%;
    max-width: 1000px;
    /* 画像の最大幅に合わせて調整 */
    display: flex;
    justify-content: center;
}

.p-career-hero__card {
    background: #ebebeb;
    padding: 48px 60px;
    width: 95%;
    max-width: 1100px;
    opacity: 0;
    transform: scale(0.98);
    /* わずかに小さくしておき、元のサイズに戻す */
    animation: heroCardFadeIn 1.2s ease forwards;
}

.p-career-hero__message {
    display: flex;
    flex-direction: column;
    align-items: center;
    /* 子要素を基本中央に寄せる */
    font-family: "Sawarabi Mincho", serif;
}

.p-career-hero__sub-text {
    width: 100%;
    display: flex;
    justify-content: center;
    /* 内部のインナーを中央に配置 */
    margin-bottom: 40px;
}

/* 本文のインナー（幅の基準） */
.p-career-hero__sub-text-inner {
    display: inline-block;
    text-align: left;
    line-height: 1.5;
    font-size: clamp(0.75rem, 0.686rem + 0.26vw, 1rem);
    position: relative;
    margin: 10px auto 0;
}

.p-career-hero__signature {
    width: 100%;
    display: flex;
    justify-content: flex-end;
    margin-top: 30px;
}

.p-career-hero__logo {
    width: clamp(25px, 10vw, 50px);
    /* 画面幅に合わせてサイズ調整 */
    height: auto;
}

@keyframes heroCardFadeIn {
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* ふわっと表示させるアニメーション */
@keyframes heroFadeIn {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.p-career-hero__main-title {
    animation-delay: 0.8s;
}

.js-hero-text {
    opacity: 0;
    transform: translateY(30px);
    animation: heroTextUp 2s ease forwards;
}

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

.p-career-hero__underline-target {
    position: relative;
    display: inline-block;
    padding-bottom: 5px;
    font-size: clamp(1.25rem, 1.123rem + 0.52vw, 1.75rem);
}

.p-career-hero__underline-target::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    /* 最初は幅ゼロ */
    height: 3px;
    background: #ED7A90;
    /* LICのブランドカラー */
    animation: underlineAnim 1s ease forwards;
    animation-delay: 2.5s;
    /* テキストが出きった後にラインを引く */
}

@keyframes underlineAnim {
    to {
        width: 100%;
        /* 左から右へ伸びる */
    }
}

/* 本文とロゴを包むグループ */
.p-career-hero__content-group {
    width: 100%;
    display: flex;
    justify-content: center;
    /* カードの中央に配置 */
}

.p-career-hero__title {
    font-family: 'Bahnschrift', sans-serif;
    font-size: clamp(3rem, 10vw, 6rem);
    /* 画面幅に合わせて可変 */
    font-weight: 700;
    color: #FFF;
    text-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

/* h1 テキスト */
.p-career-hero__title {
    opacity: 0;
    visibility: hidden;
}

/* コンテンツ全体の背景 */
.p-career-content-wrapper {
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(50px);
    -webkit-backdrop-filter: blur(50px);
    /* Safari対策 */
    padding: 60px 0;
    position: relative;
    /* z-indexを有効にするため */
    z-index: 2;
    /* ヒーローより手前、ヘッダーより奥 */
    margin-top: 100vh;
    /* ヒーローの高さ分だけ開始位置を下げる */
    min-height: 100vh;
    /* コンテンツが短くてもヒーローを隠しきれるように */
}

/* 各セクションの共通スタイル */
.p-career-section {
    width: 100%;
    max-width: 1280px;
    margin-bottom: 60px;
    padding: 60px 40px;
    /* Figma: background: rgba(255, 236, 239, 0.50); border-radius: 30px; */
    background: rgba(255, 236, 239, 0.50);
    border-radius: 30px;
}

/* セクションタイトル */
.c-heading-career {
    color: #e6003a;
    text-align: left;
    font-family: 'Bahnschrift', sans-serif;
    font-size: 48px;
    font-weight: 700;
    margin-bottom: 40px;
    line-height: 1.2;
}

/* --- About: Top Message --- */
.p-career-top-message {
    display: grid;
    grid-template-columns: 200px 1fr;
    /* 左タイトル幅を固定、右に本文 */
    align-items: start;
    /* 上端を揃える（これでH3と1行目が並びます） */
    gap: 20px;
    position: relative;
}

/* 右側に薄い装飾を追加する例 */
.p-career-top-message::after {
    content: "LIC STATION CAREERS";
    position: absolute;
    right: -20px;
    bottom: -20px;
    top: 0;
    font-family: 'Bahnschrift', sans-serif;
    font-weight: 700;
    color: rgba(237, 122, 144, 0.6);
    /* 視認できるかできないかくらいの薄さ */
    white-space: nowrap;
    z-index: -1;
    pointer-events: none;
    line-height: 1;
}

/* H3テキスト */
.p-career-top-message__title {
    color: #ed7a90;
    font-family: 'Bahnschrift', sans-serif;
    font-size: 24px;
    font-weight: 700;
    margin: 0;
    line-height: 1.5;
}

.text-shadow {
    line-height: 1;
    text-shadow: 2px 3px 3px rgba(0, 0, 0, 0.4);
}

/* 本文エリア全体 */
.p-career-top-message__content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    /* コンテンツ全体を中央寄せ */
    text-align: left;
    /* テキスト自体も中央揃え */
    padding-left: 64px;
}

/* 本文1行目：暮らしを真ん中に置ける人へ */
.p-career-top-message__catch {
    font-size: 28px;
    font-weight: 700;
    color: #333;
    margin: 0 0 3rem 0;
    /* 下にスペースをあける */
    line-height: 1.5;
}

/* 本文：以降のテキスト */
.p-career-top-message__text {
    font-size: 18px;
    line-height: 2.2;
}

.p-career-top-message__text p {
    margin-bottom: 2rem;
}

/* --- Service: Layout --- */

.p-career-service-sub-title {
    font-size: 18px;
    font-weight: 700;
    color: #333;
    margin-top: -10px;
    /* Serviceの見出しに近づける */
    margin-bottom: 15px;
    letter-spacing: 0.1em;
}

.p-career-service-tags {
    font-size: 15px;
    font-weight: 500;
    color: #ED7A90;
    /* LICのテーマカラーに合わせる */
    letter-spacing: 0.05em;
    display: flex;
    justify-content: left;
    align-items: center;
    flex-wrap: wrap;
    /* スマホで折り返せるように */
    margin-bottom: 15px;
}

.p-career-service-tags__text {
    background: #fff;
    padding: 4px 16px;
    border-radius: 50px;
}

.p-career-service-tags__divider {
    margin: 0 10px;
    color: #555;
    /* 仕切り線は少し薄くして文字を際立たせる */
    font-weight: normal;
}

.p-career-service-container {
    display: flex;
    gap: 20px;
    align-items: stretch;
    /* 高さを揃える */
}

/* サービスカード（看護/リハビリ） */
.p-career-service-card {
    flex: 1;
    background: rgba(255, 255, 255, 0.4);
    /* 背景を少し白くして視認性を上げる */
    padding: 30px 20px;
    border-radius: 20px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
    display: flex;
    flex-direction: column;
}

.p-career-service-card__description {
    font-size: 14px;
    line-height: 1.6;
    margin-bottom: 30px;
    min-height: 15.5em;
    /* 6行程度の高さを確保 */
    text-align: left;
    /* このエリアを自動で伸ばし、下のグリッドを最下部へ押し下げる */
    flex-grow: 0;
}

.p-career-service-card__title {
    font-family: 'Bahnschrift', sans-serif;
    color: #ED7A90;
    font-size: 28px;
    font-weight: 700;
    margin-bottom: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
}

.u-ruby {
    font-size: 14px;
    font-weight: 400;
}

/* 内部グリッド */
.p-career-service-card__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    /* 2列に並べる */
    gap: 20px 10px;
}

/* 各アイテム（アイコン＋テキスト） */
.p-career-service-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    height: 100%;
    /* 高さを揃えるための微調整 */
}

.p-career-service-item__icon {
    font-size: 32px;
    color: #ED7A90;
    margin-bottom: 15px;
    height: 40px;
    /* アイコン自体の高さを固定 */
    display: flex;
    align-items: center;
    justify-content: center;
}

.p-career-service-item__text {
    font-size: 14px;
    line-height: 1.6;
    word-break: break-all;
    min-height: 3.2em;
    /* 3行分程度の高さを確保 */
    display: flex;
    align-items: flex-start;
    /* テキストは上詰め */
    justify-content: center;
}

/* 制度外サービスエリアのスタイル */
.p-career-service-extra {
    margin-top: 30px;
    padding-top: 25px;
    border-top: 1px dashed #ED7A90;
    position: relative;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px 10px;
}

/* 「制度外サービス」ラベル */
.p-career-service-extra__label {
    font-size: 11px;
    background: #ED7A90;
    color: #fff;
    padding: 2px 10px;
    border-radius: 10px;
    position: absolute;
    top: -10px;
    left: 50%;
    transform: translateX(-50%);
    font-weight: bold;
    z-index: 1;
}

/* 制度外サービスエリア内のアイテム調整 */
.p-career-service-extra .p-career-service-item {
    margin-top: 10px;
}

/* --- Poeple Section --- */
/* --- Interview: Layout --- */
.p-career-people-block {
    display: grid;
    grid-template-columns: 200px 1fr;
    gap: 20px;
    align-items: start;
}

.p-career-interview__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    /* 基本4列 */
    gap: 40px 24px;
}

/* 下段3名を中央寄せにするための調整 */
.p-career-interview-card--lower {
    grid-column: span 1;
}

.p-career-interview-card:nth-child(5) {
    grid-column-start: 1;
    /* 必要に応じて調整 */
}

/* カードのデザイン */
.p-career-interview-card {
    position: relative;
    cursor: pointer;
    display: flex;
    /* Flexboxを有効化 */
    flex-direction: column;
    /* 上から下に並べる */
    align-items: center;
    /* 中身をすべて中央寄せにする */
}

.p-career-interview-card__tag {
    position: absolute;
    top: 10px;
    left: 50%;
    transform: translateX(-50%);
    color: #E6003A;
    padding: 4px 12px;
    font-size: 10px;
    /* border-radius: 4px; */
    z-index: 2;
    white-space: nowrap;
    text-align: center;
    /* 改行を防ぐ */
}

/* 写真ズーム演出 */
.p-career-interview-card__image {
    width: 100%;
    aspect-ratio: 3 / 4;
    overflow: hidden;
    border-radius: 15px;
    margin-bottom: 15px;
}

.p-career-interview-card__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.p-career-interview-card:hover .p-career-interview-card__image img {
    transform: scale(1.1);
    /* 10%ズーム */
}

/* ボディ（肩書き・ボタン）エリア */
.p-career-interview-card__body {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* 内部のテキストやボタンも中央寄せ */
    text-align: center;
}

/* 名前と肩書のスタイル */
.p-career-interview-card__post {
    font-size: 12px;
    margin-bottom: 12px;
    font-weight: 700;
    line-height: 1.5;
    /* 2行分の高さを最小値として確保 */
    min-height: 3em;
    display: flex;
    align-items: center;
    /* 1行の時でも中央に来るように */
    justify-content: center;
}

.p-career-interview-card__name {
    font-size: 18px;
    font-weight: 700;
    color: #333;
    margin-bottom: 12px;
}

/* ボタン風デザイン */
.c-button-interview {
    background: #ED7A90;
    border: none;
    border-radius: 50px;
    color: #fff;
    font-weight: bold;
    font-size: 14px;
    padding: 5px 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    /* ボタン内部のテキストと矢印を中央に */
    gap: 8px;
    transition: gap 0.3s;
    margin: 0 auto;
    /* 外側の配置も中央に */
    cursor: pointer;
}

.p-career-interview-card:hover .c-button-interview {
    gap: 15px;
    /* 矢印が右に動く演出 */
}

/* --- Data Analytics --- */

.u-mt-100 {
    margin-top: 100px;
}

.p-career-data-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
}

.p-career-data-item {
    background: rgba(255, 255, 255, 0.5);
    /* 視認性のため少し濃いめ */
    border-radius: 30px;
    padding: 40px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
    text-align: center;
    opacity: 0;
    /* 初期は透明 */
    transform: translateY(30px);
    /* 下にずらしておく */
    transition: all 0.8s ease-out;
}

.p-career-data-item.is-active {
    opacity: 1;
    transform: translateY(0);
}

.p-career-data-item--full {
    grid-column: 1 / -1;
}

.p-career-data-item__label {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 30px;
}

/* .p-career-data-item__text {
    margin-top: 25px;
    font-size: 14px;
    line-height: 1.8;
    color: #444;
} */

/* 男女比のレイアウト調整 */
.p-career-data-item__chart--gender {
    display: flex;
    justify-content: center;
    gap: 60px;
    /**/
    align-items: flex-end;
    /* 足元を揃える */
    min-height: 240px;
    /* 円グラフの高さ(240px)と合わせる */
    transition: all 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* アイコンとテキストを包むグループ */
.p-career-gender-group {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    /**/
    opacity: 0.3;
    transform: scale(0.6);
    transition: all 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* アニメーション完了後の状態 */
.p-career-data-item__chart--gender.is-active .p-career-gender-group {
    opacity: 1;
    transform: scale(1.5);
}

/* アイコン自体のサイズ */
.p-career-gender-icon-wrap {
    /* width: 100px; */
    /* ここでサイズを調整 */
    /* margin-bottom: 15px; */
    width: 100%;
    height: auto;
}

.p-career-gender-icon-wrap img {
    width: 60px;
    /* サイズは適宜調整 */
    height: auto;
}

.p-career-gender-label {
    font-size: 14px;
    margin-bottom: 10px;
    color: #333;
}

.p-career-gender-value {
    /* font-family: 'Bahnschrift', sans-serif; */
    font-size: 32px;
    font-weight: 700;
    color: #ED7A90;
    font-weight: 700;
}

/* 従業員数アイコンの出現アニメーション */
.p-career-employee-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 15px;
}

.p-career-employee-icons {
    display: flex;
    gap: 4px;
}

.p-career-employee-label {
    width: 120px;
    text-align: left;
    font-weight: bold;
    white-space: nowrap;
}

.p-career-employee-num {
    width: 60px;
    text-align: right;
    font-weight: bold;
}

.p-career-person-icon {
    /* width: 16px; */
    opacity: 0;
    transform: scale(0);
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    width: 14px;
    height: auto;
    margin-right: 2px;
}

.p-career-person-icon.is-active {
    opacity: 1;
    transform: scale(1);
}

/* --- Data Analytics: 職種グラフ (Chart.js用) --- */

/* グラフを表示する親要素のサイズを固定 */
.p-career-data-item__chart {
    position: relative;
    width: 200px;
    height: 200px;
    margin: 0 auto 20px;
}

/* キャンバスが親要素にフィットするように設定 */
#js-occupation-chart {
    max-width: 100% !important;
    max-height: 100% !important;
}

/* 凡例コンテナ */
.p-career-chart-legend {
    margin-top: 20px;
    opacity: 0;
    transform: translateY(10px);
    transition: all 0.6s ease-out;
}

.p-career-chart-legend.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* 凡例リスト */
.p-career-legend-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    /* 2列に並べる */
    gap: 10px 15px;
    list-style: none;
    padding: 0;
    max-width: 450px;
    margin: 0 auto;
    text-align: left;
}

.p-career-legend-item {
    display: flex;
    align-items: flex-start;
    /* アイコンを文字の1行目上端に合わせる */
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(5px);
    }

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

.p-career-legend-color {
    width: 12px;
    height: 12px;
    border-radius: 2px;
    margin-right: 8px;
    margin-top: 2px;
    /* 文字の高さに合わせる */
    flex-shrink: 0;
}

.p-career-legend-label {
    color: #333;
    font-size: 13px;
    line-height: 1.4;
    margin-right: auto;
    white-space: normal;
    /* 改行を許可する */
    word-break: auto-phrase;
    flex: 1;
    text-align: left;
}

.p-career-legend-value {
    font-size: 13px;
    font-weight: 700;
    color: #888;
    font-family: 'Bahnschrift', sans-serif;
    margin-left: 8px;
    white-space: nowrap;
    /* 数値が改行されないように固定 */
}

.p-career-employee-list {
    padding: 0 50px;
}

/* --- Recuruitment Section --- */

/* 募集要項グループ */
.p-career-recruit-group {
    display: grid;
    grid-template-columns: 200px 1fr;
    /* Aboutセクションと同じ比率 */
    gap: 40px;
    align-items: start;
}

/* 【重要】H3見出しを固定する設定 */
.p-career-recruit-sticky-h3 {
    position: -webkit-sticky;
    position: sticky;
    top: 120px;
    /* ヘッダーとの重なりを避ける数値 */
    align-self: start;
}

/* 各求人情報のカードデザイン */
.p-career-recruit-card {
    background: rgba(255, 255, 255, 0.4);
    border-radius: 15px;
    padding: 30px;
    margin-bottom: 30px;
}

.p-career-recruit-card__name {
    font-size: 20px;
    color: #ED7A90;
    font-weight: 700;
    margin-bottom: 20px;
    border-left: 4px solid #ED7A90;
    padding-left: 15px;
}

/* 募集要項テーブル */
.p-career-recruit-table {
    width: 100%;
    border-collapse: collapse;
}

.p-career-recruit-table th {
    width: 150px;
    text-align: left;
    padding: 15px 10px;
    border-bottom: 1px solid rgba(237, 122, 144, 0.2);
    font-size: 14px;
    vertical-align: top;
}

.p-career-recruit-table td {
    padding: 15px 10px;
    border-bottom: 1px solid rgba(237, 122, 144, 0.2);
    font-size: 15px;
    line-height: 1.6;
}

.br-span {
    margin-bottom: 10px;
}

.p-career-recruit-table .s-ulli {
    padding-left: 20px;
}

/* --- Recruitment: エントリーカード --- */

.p-career-recruit-entry-card {
    display: flex;
    background: #707070;
    /* ワイヤーフレームのグレー背景 */
    border-radius: 20px;
    overflow: hidden;
    margin-top: 60px;
    align-items: stretch;
}

/* 左側：画像エリア */
.p-career-recruit-entry-card__image {
    flex: 1.2;
    line-height: 0;
}

.p-career-recruit-entry-card__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: left center;
}

/* 右側：テキストエリア */
.p-career-recruit-entry-card__content {
    flex: 1;
    padding: clamp(0.625rem, -2.024rem + 3.35vw, 2rem) 40px;
    color: #fff;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.p-career-recruit-entry-card__title {
    font-size: 20px;
    font-weight: 700;
    line-height: 1.5;
    margin-top: 25px;
    margin-bottom: 25px;
}

.p-career-recruit-entry-card__text,
.p-career-recruit-entry-card__note {
    font-size: 14px;
    line-height: 1.8;
    margin-bottom: 20px;
    color: rgba(255, 255, 255, 0.9);
}

.p-career-recruit-entry-card__content .c-button-entry-large {
    margin-top: 20px;
}

/* --- Process Section --- */

/* --- Process: 共通グループ設定 --- */
.p-career-process-group {
    display: grid;
    grid-template-columns: 200px 1fr;
    gap: 40px;
    align-items: start;
}

/* --- Selection Flow: デザイン --- */
.p-career-flow-list {
    list-style: none;
    padding: 0;
}

.p-career-flow-item {
    display: flex;
    gap: 20px;
    margin-bottom: 40px;
    position: relative;
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s ease, transform 0.8s ease;
    transition-delay: var(--flow-delay, 0s);
}

.p-career-flow-item.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.p-career-flow-item.is-visible .p-career-flow-step {
    animation: bounceIn 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
    animation-delay: calc(var(--flow-delay) + 0.3s);
    opacity: 0;
    /* 最初は隠しておく */
}

@keyframes bounceIn {
    0% {
        opacity: 0;
        transform: scale(0.3);
    }

    70% {
        transform: scale(1.1);
    }

    100% {
        opacity: 1;
        transform: scale(1);
    }
}

/* ステップ同士を繋ぐ縦線 */
.p-career-flow-item:not(:last-child)::after {
    content: "";
    position: absolute;
    left: 50px;
    /* 図形の中央 */
    top: 105px;
    /* 図形の先端付近から開始 */
    bottom: -40px;
    width: 2px;
    background: rgba(237, 122, 144, 0.3);
}

.p-career-flow-step {
    flex-shrink: 0;
    width: 100px;
    /* 画像の横幅に合わせる */
    height: 110px;
    /* 矢印の先端分、高さを少し確保 */
    display: flex;
    align-items: center;
    justify-content: center;
    padding-bottom: 28px;
    /* 矢印の先端を避けて文字を中央より少し上に配置 */

    font-size: 18px;
    font-weight: 700;
    color: #fff;
    line-height: 1;

    /* 背景画像の設定 */
    background-image: url('https://stg.lic-station.com/wp-content/themes/LIC/assets/images/flow-obj.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center top;
}

.p-career-flow-body {
    padding-top: 16px;
}

.p-career-flow-title {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 10px;
    color: #333;
    line-height: 1.2;
}

.p-career-flow-text {
    font-size: 15px;
    line-height: 1.8;
    color: #555;
}

/* --- Q&A: アコーディオン --- */
.p-career-qa-item {
    background: rgba(255, 255, 255, 0.4);
    border-radius: 15px;
    margin-bottom: 15px;
    overflow: hidden;
}

.p-career-qa-question {
    width: 100%;
    padding: 25px 30px;
    display: flex;
    align-items: center;
    background: none;
    border: none;
    cursor: pointer;
    text-align: left;
}

.p-career-qa-q {
    color: #ED7A90;
    font-weight: 700;
    font-size: 20px;
    margin-right: 15px;
}

.p-career-qa-q-text {
    flex: 1;
    font-weight: 700;
    font-size: 16px;
    color: #333;
}

/* 開閉アイコン（＋/ー） */
.p-career-qa-icon {
    position: relative;
    width: 20px;
    height: 20px;
    margin-left: 15px;
}

.p-career-qa-icon::before,
.p-career-qa-icon::after {
    content: "";
    position: absolute;
    background: #ED7A90;
    transition: transform 0.3s;
}

.p-career-qa-icon::before {
    width: 100%;
    height: 2px;
    top: 9px;
    left: 0;
}

.p-career-qa-icon::after {
    width: 2px;
    height: 100%;
    top: 0;
    left: 9px;
}

/* 開いている時のアイコン（縦棒を消してマイナスに） */
.p-career-qa-item.is-open .p-career-qa-icon::after {
    transform: rotate(90deg);
    opacity: 0;
}

/* 回答エリア（JSで高さを制御） */
.p-career-qa-answer {
    height: 0;
    overflow: hidden;
    transition: height 0.3s ease;
}

.p-career-qa-answer-inner {
    padding: 0 30px 25px 30px;
    display: flex;
}

.p-career-qa-a {
    color: #707070;
    font-weight: 700;
    font-size: 20px;
    margin-right: 15px;
}

.p-career-qa-a-text {
    font-size: 15px;
    line-height: 1.8;
}

/* --- Interview Modal --- */

/* 基本スタイル */
.p-career-modal {
    position: fixed;
    /* 画面に対して固定 */
    inset: 0;
    /* 上下左右 0 (画面全域) */
    z-index: 9999;
    /* ヘッダーよりも手前 */
    display: none;
    /* 通常は隠す */
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.4s ease;
}

.p-career-modal.is-open {
    display: flex;
    /* JSでis-openがついた時だけ表示 */
    opacity: 1;
}

.p-career-modal__overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.8);
    /* 80%の黒透明 */
    backdrop-filter: blur(8px);
    /* 背景をぼかす */
}

.p-career-modal__container {
    position: relative;
    width: 95%;
    max-width: 900px;
    max-height: 85vh;
    /* 画面の高さの85%まで */
    background: #fff;
    border-top-left-radius: 30px;
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
    border-bottom-left-radius: 30px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    overflow-y: auto;
    /* 中身が長い場合はここがスクロールする */
    z-index: 1;
    /* スムーズなスクロール */
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
}

/* スクロールバー全体の幅 */
.p-career-modal__container::-webkit-scrollbar {
    width: 10px;
}

/* スクロールバーの背景（レール）部分 */
.p-career-modal__container::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 10px;
}

/* つまみ（動くパーツ）部分 */
.p-career-modal__container::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 10px;
}

/* つまみホバー時 */
.p-career-modal__container::-webkit-scrollbar-thumb:hover {
    background: #555;
}

/* 閉じるボタン（右上の×） */
.p-career-modal__close-btn {
    position: sticky;
    top: 20px;
    left: calc(100% - 60px);
    width: 40px;
    height: 40px;
    background: #eee;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.3s;
}

.p-career-modal__close-btn::before,
.p-career-modal__close-btn::after {
    content: "";
    position: absolute;
    width: 20px;
    height: 2px;
    background: #333;
}

.p-career-modal__close-btn::before {
    transform: rotate(45deg);
}

.p-career-modal__close-btn::after {
    transform: rotate(-45deg);
}

.p-career-modal__close-btn:hover {
    background: #ddd;
}

/* --- 記事レイアウトデザイン --- */
.p-career-article {
    padding: 20px 60px 80px;
}

.p-career-article__thumb {
    position: relative;
    /* 子要素の absolute の基準になります */
    width: 100%;
    margin-bottom: 20px;
    border-radius: 20px;
    overflow: hidden;
    line-height: 0;
    /* 下部の隙間対策 */
}

.p-career-article__thumb img {
    width: 100%;
    height: auto;
    object-fit: cover;
}

.p-career-article__header {
    margin-bottom: 40px;
    text-align: center;
}

.p-career-article__post {
    position: absolute;
    bottom: 20px;
    /* 下端からの距離 */
    right: 20px;
    /* 右端からの距離 */
    z-index: 2;
    background: rgba(237, 122, 144, 0.9);
    color: #fff !important;
    padding: 10px 15px;
    font-weight: 700;
    font-size: 14px;
    border-radius: 30px;
    margin: 0 !important;
    /* 余計なマージンをリセット */
    /* 改行を有効にし、行間を調整する設定 */
    display: inline-block;
    /* 文字の塊に合わせる */
    line-height: 1.4;
    /* 行間を適切に取ることで重なりを防止 */
    text-align: center;
    /* 2行になった時に中央に寄せる */
    width: auto;
    /* 幅を自動にする */
    max-width: 80%;
    /* 画像からはみ出さないよう上限を設定 */
}

.p-career-article__title {
    font-size: 32px;
    font-weight: 700;
    margin-bottom: 25px;
    line-height: 1.3;
    text-align: left;
}

.p-career-article__lead {
    font-size: 16px;
    line-height: 2;
    color: #555;
    background: #fdf2f4;
    /* 薄いピンクの背景でリード文を強調 */
    padding: 30px;
    border-radius: 15px;
}

.p-career-article__lead p {
    text-align: left;
}

/* 記事のメインタイトル（H2）
.p-career-article__main-title {
    font-size: clamp(24px, 5vw, 28px);
    font-weight: 700;
    line-height: 1.4;
    margin-bottom: 40px;
    color: #333;
    text-align: left;
} */

/* セクション見出し（H2）: ピンクの太い左線 */
.p-career-article__h2 {
    font-size: clamp(20px, 4vw, 24px);
    color: #ED7A90;
    border-left: 6px solid #ED7A90;
    padding-left: 15px;
    margin: 60px 0 30px;
    font-weight: 700;
}

/* モーダル内本文のH2（章タイトル） */
.p-career-article__content h2 {
    font-size: 24px;
    color: #ED7A90;
    border-left: 6px solid #ED7A90;
    padding-left: 15px;
    margin: 60px 0 30px;
    font-weight: 700;
}

/* モーダル内本文のH3（質問内容） */
.p-career-article__content h3 {
    font-size: 18px;
    font-weight: 700;
    margin-top: 40px;
    margin-bottom: 15px;
    color: #333;
}

/* 質問タイトル（H3）: 少し小さめの黒文字 */
.p-career-article__h3 {
    font-size: 18px;
    font-weight: 700;
    margin-top: 40px;
    margin-bottom: 15px;
    color: #333;
}

/* --- 質問・回答セクション --- */
.p-career-article__section-title {
    font-size: clamp(18px, 4vw, 22px);
    color: #ED7A90;
    border-left: 6px solid #ED7A90;
    padding-left: 15px;
    margin: 50px 0 20px;
    line-height: 1.4;
    font-weight: 700;
}

/* セクション全体の余白 */
.p-career-article__section {
    margin-bottom: 80px;
    border-bottom: 1px dashed #eee;
    /* セクションの区切りを薄く入れる（お好みで） */
    padding-bottom: 40px;
}

.p-career-article__section:last-child {
    border-bottom: none;
}

.p-career-article__question {
    font-weight: 700;
    font-size: 18px;
    line-height: 1.8;
    margin-bottom: 20px;
    display: inline;
    /* 下線マーカー演出 */
    background: linear-gradient(transparent 60%, rgba(237, 122, 144, 0.2) 0%);
    /* 改行時にもマーカーが続くように箱の装飾を調整 */
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
}

/* 質問文の後に強制的に改行を入れるための調整（inlineにした影響を補完） */
.p-career-article__question::after {
    content: "";
    display: block;
    margin-bottom: 20px;
    /* 下の回答との余白 */
}

/* 段落同士の余白 */
.p-career-article__answer {
    font-size: 16px;
    line-height: 2.2;
    color: #333;
}

.p-career-article__answer {
    display: flex;
    align-items: flex-start;
    /* アイコンを上揃えに */
    gap: 15px;
    /* アイコンとテキストの間隔 */
    margin-bottom: 20px;
}

/* 最後の段落だけ、次の質問との間隔を大きく取る */
.p-career-article__answer:last-of-type {
    margin-bottom: 60px;
}

/* 顔アイコン（丸型） */
.p-career-article__staff-icon {
    flex-shrink: 0;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    overflow: hidden;
    background: #eee;
}

.p-career-article__staff-icon img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* 2段目以降のアイコンスペースを透明にする */
.p-career-article__staff-icon.is-spacer {
    background: transparent;
}

.p-career-article__staff-icon.is-spacer img {
    display: none;
}

.p-career-article__answer-text {
    flex: 1;
    font-size: 16px;
    line-height: 1.8;
    color: #333;
    padding-top: 10px;
    /* アイコンの中心付近から文字が始まるよう調整 */
}

/* --- モーダル内：見出しエリア（INDEX） --- */
.p-career-article__index {
    background: #f9f9f9;
    padding: 25px;
    border-radius: 15px;
    margin-top: 30px;
    text-align: left;
}

.p-career-article__index-label {
    font-weight: 700;
    color: #ED7A90;
    font-size: 14px;
    margin-bottom: 10px;
    letter-spacing: 0.1em;
}

#js-modal-index-list {
    list-style: none;
    padding: 0;
}

#js-modal-index-list li {
    font-size: 15px;
    line-height: 1.6;
    margin-bottom: 8px;
    color: #333 !important;
    position: relative;
    padding-left: 20px;
}

#js-modal-index-list li::before {
    content: "・";
    position: absolute;
    left: 0;
    color: #ED7A90;
}

.p-career-article__index-link {
    color: #333;
}

/* --- モーダル内：フッターボタンの調整 --- */
.p-career-article__footer {
    position: relative;
    display: block;
    /* 縦並び構造へ */
    margin-top: 60px;
    padding-top: 40px;
    border-top: 1px solid #eee;
    text-align: center;
}

.p-career-article__other-label {
    font-weight: 700;
    color: #ED7A90;
    font-size: 14px;
    margin-bottom: 20px;
    letter-spacing: 0.1em;
}

.p-career-article__staff-list {
    display: flex;
    justify-content: center;
    gap: 15px;
    flex-wrap: wrap;
}

.js-modal-nav-btn:hover {
    border-color: #ED7A90;
    transform: translateY(-3px);
}

.js-modal-nav-btn img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.js-modal-nav-btn {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    overflow: hidden;
    border: 2px solid transparent;
    cursor: pointer;
    transition: all 0.3s;
    background: #eee;
    padding: 0;
}

/* モーダル内右下ポップアップ */
.c-modal-entry-popup {
    position: sticky;
    bottom: 20px;
    margin-left: auto;
    margin-right: 0;
    width: 90px;
    height: 90px;
    background: linear-gradient(135deg, #ff7eb3, #ff758c);
    border-radius: 50%;
    color: #fff;
    text-decoration: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: bold;
    box-shadow: 0 4px 15px rgba(255, 123, 147, 0.4);
    z-index: 100;
    line-height: 1.2;
    transition: transform 0.3s;
}

.c-modal-entry-popup:hover {
    transform: scale(1.1);
}

.c-modal-entry-popup i {
    margin-top: 5px;
    font-size: 14px;
}

.font-text-small {
    font-size: small;
    margin: 10px auto 0 !important;
}

/* Access Section */
.p-lp-access__logo {
    height: 40px;
}

.p-lp-section__main {
    flex-grow: 1;
    width: 100%;
}

/* 地図の器 */
.p-lp-access__map {
    width: 100%;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    line-height: 0;
    /* 下の隙間を消す */
}

/* 拠点詳細 */
.p-lp-access__info {
    background: rgba(255, 255, 255, 0.4);
    border-radius: 20px;
    padding: 40px;
}

.p-lp-access__info-header {
    display: flex;
    align-items: center;
    gap: 5px;
}

.p-lp-access__logo {
    height: 40px;
}

.p-lp-access__lic-color {
    color: #ED7A90;
    font-size: 1rem;
}

.p-lp-access__name {
    font-size: 24px;
    font-weight: 800;
    color: #333;
}

/* 定義リスト形式のレイアウト */
.p-lp-access__list {
    display: grid;
    grid-template-columns: 140px 1fr;
    gap: 0;
}

.p-lp-access__list dt,
.p-lp-access__list dd {
    padding: 20px 0;
    /* border-bottom: 1px solid #eee; */
    display: flex;
    align-items: center;
}

.p-lp-access__list dt {
    font-weight: 800;
    color: #ED7A90;
    font-size: 15px;
    padding-right: 20px;
}

.p-lp-access__list dd {
    font-size: 15px;
    line-height: 1.7;
    margin-left: 20px;
}

.p-lp-access__list dd a {
    color: inherit;
    text-decoration: none;
    font-weight: 700;
}



/* --- footer-career.php --- 
---------------------------------------------------------------------------*/
/* footer 全体の固定設定 */

.l-footer-career {
    position: relative;
    z-index: 2;
    background: #D9D9D9;
    /* Figmaのワイヤーフレームに合わせた薄いグレー */
    padding: 80px 0 0;
    color: #333;
}

.l-footer-career__inner {
    display: flex;
    justify-content: space-between;
    gap: 40px;
    padding-bottom: 60px;
}

/* 左側：ロゴとナビ */
.l-footer-career__logo-area {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 40px;
}

.l-footer-career__logo {
    width: 80px;
    height: auto;
}

.l-footer-career__logo-text {
    font-family: 'Bahnschrift', sans-serif;
    font-size: 24px;
    font-weight: 700;
    letter-spacing: 0.05em;
}

.l-footer-career__nav {
    display: flex;
    flex-wrap: wrap;
    gap: 30px 60px;
}

.l-footer-career__nav-title {
    font-weight: 700;
    font-size: 16px;
    margin-bottom: 15px;
}

.l-footer-career__nav-list {
    list-style: none;
    padding: 0;
}

.l-footer-career__nav-list li {
    margin-bottom: 10px;
}

.l-footer-career__nav-list a {
    text-decoration: none;
    color: #666;
    font-size: 12px;
    transition: color 0.3s;
}

.l-footer-career__nav-list a:hover {
    color: #ED7A90;
}

/* ピンクの大きなボタン */
.c-button-entry-large {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    background: linear-gradient(90deg, #ED7A90, #f08ea1);
    color: #fff;
    padding: 18px 40px;
    border-radius: 50px;
    text-decoration: none;
    font-weight: 700;
    font-size: 18px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    width: fit-content;
}

.c-button-entry-large:hover {
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(237, 122, 144, 0.4);
}

/* 右側：ボタンとサブリンク */
.l-footer-career__right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: space-between;
}

/* 右下サブリンク */
.l-footer-career__sub-links {
    display: flex;
    gap: 20px;
}

.l-footer-career__sub-link {
    text-decoration: none;
    color: #333;
    font-size: 14px;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 5px;
}

.l-footer-career__sub-link:hover {
    opacity: 0.7;
    text-decoration: underline;
    transition: opacity 0.3s;
}

/* コピーライト（一番下の黒い帯） */
.l-footer-career__copyright {
    background: #000;
    color: #fff;
    text-align: center;
    padding: 15px 0;
}

.l-footer-career__copyright p {
    font-size: 12px;
    margin: 0;
}

/* ENTRYはこちらポップアップ */
.c-entry-popup {
    position: fixed;
    right: 15px;
    bottom: 15px;
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, #ff7eb3, #ff758c);
    border-radius: 50%;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    z-index: 999;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s ease, opacity 0.3s ease;
}

/* ユーザーが閉じた時用のクラス */
.c-entry-popup.is-hidden {
    opacity: 0;
    visibility: hidden;
    transform: scale(0.8);
    pointer-events: none;
}

.c-entry-popup__link {
    text-decoration: none;
    color: #fff;
    font-size: 11px;
    font-weight: bold;
    text-align: center;
    line-height: 1.2;
}

/* ENTRYはこちらポップアップ 閉じるボタン */
.c-entry-popup__close {
    position: absolute;
    top: 0;
    right: 0;
    width: 30px;
    height: 30px;
    background: #333;
    color: #fff;
    border: none;
    border-radius: 50%;
    font-size: 14px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.c-entry-popup__close::before {
    content: "×";
}



/* --- Entry Page Styles --- */
.p-entry-hero {
    min-height: 100vh;
    padding: 120px 0 60px;
    background: linear-gradient(104deg, #FFF 4.37%, #E6003A 100%);
    /* ヒーローと同じ */
}

.p-entry-card {
    background: #FFF;
    border-radius: 30px;
    /* 大きな角丸 */
    padding: 60px 80px;
    max-width: 800px;
    margin: 0 auto;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.p-entry-lead {
    text-align: center;
    margin-bottom: 40px;
    line-height: 1.8;
    font-size: 15px;
    color: #555;
}

.p-entry-form__item {
    margin-bottom: 30px;
}

.p-entry-form__label {
    display: block;
    font-weight: 700;
    margin-bottom: 10px;
    font-size: 14px;
}

.u-required {
    background: #E6003A;
    color: #fff;
    font-size: 10px;
    padding: 2px 6px;
    border-radius: 3px;
    margin-left: 5px;
    vertical-align: middle;
}

.p-entry-form input[type="text"],
.p-entry-form input[type="email"],
.p-entry-form input[type="tel"],
.p-entry-form input[type="date"],
.p-entry-form select,
.p-entry-form textarea {
    width: 100%;
    box-sizing: border-box;
    padding: 12px 15px;
    border: 1px solid #ddd;
    border-radius: 8px;
    background: #f9f9f9;
    font-size: 16px;
    /* 外観をリセットしてブラウザごとの差をなくす */
    appearance: none;
    -webkit-appearance: none;
}

/* プルダウン（select）に矢印アイコンを再付与する（appearance: none をした場合） */
.p-entry-form select {
    background-image: url('data:image/svg+xml;charset=utf-8,%3Csvg xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22 width%3D%2212%22 height%3D%2212%22 fill%3D%22%23666%22%3E%3Cpath d%3D%22M10.293 3.293 6 7.586 1.707 3.293A1 1 0 0 0 .293 4.707l5 5a1 1 0 0 0 1.414 0l5-5a1 1 0 1 0-1.414-1.414z%22%2F%3E%3C%2Fsvg%3E');
    background-repeat: no-repeat;
    background-position: right 15px center;
    background-size: 12px;
}

.p-entry-form__submit {
    text-align: center;
    margin-top: 50px;
}

.p-entry-form__submit button {
    cursor: pointer;
    border: none;
}

/* 送信完了メッセージのスタイル */
.p-entry-success {
    padding: 40px 0;
    text-align: center;
}

.p-entry-success p {
    font-size: 18px;
    line-height: 2;
    margin-bottom: 30px;
    color: #333;
}

.p-entry-success__text {
    font-size: 16px;
    line-height: 2;
    margin-bottom: 40px;
    font-weight: 500;
}

/* ボタンの配置中央寄せ */
.p-entry-success__button {
    display: flex;
    justify-content: center;
}



/* --- レスポンシブ対応（スマホ） --- 
---------------------------------------------------------------------------*/

@media (min-width:1281px) {

    .p-career-recruit-entry-card__text,
    .p-career-recruit-entry-card__note {
        margin-bottom: 20px;
    }
}

@media (min-width:1024px) {

    /* header-career.php 
    ------------------------------------------------------------*/

    /* ハンバーガーメニュー */
    .l-header-career__hamburger {
        display: none;
        /* PC時はnavメニューを表示するため一旦非表示 */
    }



    /* page-career.php 
    ------------------------------------------------------------*/

    /*  */
    .p-career-top-message::after {
        font-size: 80px;
        white-space: nowrap;
        top: auto;
        bottom: -20px;
        right: -20px;
    }

    .u-only-sp {
        display: none;
    }



    /* footer-career.php 
    ------------------------------------------------------------*/

    /* ENTRYはこちらポップアップ */
    .c-entry-popup {
        display: none;
        /* PC表示では隠す */
    }
}

@media (max-width:1280px) {

    /* page-career.php 
    ------------------------------------------------------------*/

    /* 各セクションの共通スタイル */
    .p-career-section {
        width: 90%;
        margin: 0 auto 60px;
    }

    /* エントリーカード */
    .p-career-recruit-entry-card__title {
        margin-top: 0;
        margin-bottom: 0;
    }

    .p-career-recruit-entry-card__text,
    .p-career-recruit-entry-card__note {
        margin-bottom: 0;
    }

}

@media (max-width: 1023px) {

    /* header-career.php 
    ------------------------------------------------------------*/

    .l-header-career__nav,
    .l-header-career__cta {
        display: none;
        /* スマホ時はハンバーガーメニューを表示するため一旦非表示 */
    }

    /* ハンバーガーメニュー */
    .l-header-career__nav.is-open {
        display: flex;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh;
        background: rgba(255, 255, 255, 0.95);
        flex-direction: column;
        justify-content: center;
        align-items: center;
        z-index: 1000;
    }

    .l-header-career__nav.is-open .l-header-career__list {
        flex-direction: column;
        padding: 0;
        align-items: center;
        gap: 2rem;
    }



    /* page-career.php 
    ------------------------------------------------------------*/

    .p-career-hero {
        height: 100vh;
        /* スマホでは高さを画面の半分程度に */
    }

    .p-career-section {
        padding: 40px 20px;
        border-radius: 20px;
    }

    .c-heading-career {
        font-size: 32px;
    }

    .p-career-top-message {
        display: block;
        /* 縦並びに戻す */
    }

    /* --- About: Top Message --- */

    .p-career-top-message {
        display: block;
        /* padding-right: 40px;
        縦書きテキストと被らないように余白を確保 */
    }

    .p-career-top-message::after {
        writing-mode: vertical-rl;
        /* 縦書き（右から左へ行が進む設定） */
        text-orientation: mixed;
        /* 英字を90度回転させて読みやすくする */
        font-size: clamp(1.5rem, 1.118rem + 1.57vw, 3rem);
        /* 画面サイズに合わせて調整 */
        right: 10px;
        top: auto;
        letter-spacing: 0.1em;
        /* 縦書きは少し字間を空けると綺麗 */
    }

    /* 本文エリア全体 */
    .p-career-top-message__content {
        align-items: flex-start;
        text-align: left;
        padding-left: 0;
    }

    /* H3テキスト */
    .p-career-top-message__title {
        margin-bottom: 2rem;
        text-align: left;
    }

    /* 本文1行目：暮らしを真ん中に置ける人へ */
    .p-career-top-message__catch {
        font-size: 22px;
        margin-bottom: 2rem;
    }

    /* 本文：以降のテキスト */
    .p-career-top-message__text {
        font-size: 15px;
        line-height: 2;
    }

    /* --- Service: Layout --- */

    .p-career-service-container {
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        margin: 0 -20px;
        padding: 0 20px 20px;
        -webkit-overflow-scrolling: touch;
        gap: 20px;
        /* スナップの設定 */
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }

    .p-career-service-container::-webkit-scrollbar {
        display: none;
    }

    .p-career-service-card {
        flex: 0 0 85%;
        /* 次のカードが見えるサイズ */
        scroll-snap-align: center;
        /* 中央に吸い付く */
        min-height: auto;
        /* 高さを内容に合わせる */
    }

    /* インジケーター（ドット）のスタイル */
    .p-career-service-dots {
        display: flex;
        justify-content: center;
        gap: 10px;
        margin-top: 10px;
        padding-bottom: 20px;
    }

    .p-career-service-dot {
        width: 8px;
        height: 8px;
        background: #ddd;
        border-radius: 50%;
        transition: all 0.3s ease;
    }

    .p-career-service-dot.is-active {
        background: #ED7A90;
        width: 20px;
        /* アクティブ時に横長にする */
        border-radius: 4px;
    }

    .p-career-service-card__title {
        font-size: 20px;
        margin-bottom: 15px;
    }

    .p-career-service-card__description {
        font-size: 12px;
        min-height: 9.75rem;
        /* スマホでは高さを自由にする（スライドのため横との干渉が少ない） */
        margin-bottom: 20px;
    }

    .p-career-service-item {
        padding: 5px;
        /* 内側の余白を少し設ける */
    }

    .p-career-service-item__icon {
        font-size: 20px;
        margin-bottom: 8px;
    }

    .p-career-service-item__text {
        font-size: 11px;
        line-height: 1.3;
        min-height: 2.6em;
        display: flex;
        align-items: flex-start;
        justify-content: center;
    }

    .p-career-service-card__grid {
        display: grid;
        /* 2列(1fr 1fr)表示 */
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 15px 5px;
    }

    /* --- People: Layout --- */

    /* Interview 横スライダー */
    .p-career-people-block {
        display: block;
    }

    .p-career-interview__slider-container {
        overflow-x: auto;
        padding-bottom: 20px;
        margin-right: -20px;
        /* 親のpadding分を相殺して端まで流す */
        padding-right: 20px;
        -webkit-overflow-scrolling: touch;
        /* 滑らかなスクロール */
    }

    .p-career-interview__grid {
        display: flex;
        /* 横に並べる */
        width: max-content;
        /* 中身の幅に合わせる */
        gap: 15px;
    }

    .p-career-interview-card {
        width: 200px;
        /* カードの幅を固定 */
    }

    .p-career-interview-card__tag {
        top: 8px;
        padding: 2px 8px;
        font-size: 10px;
        /* タグも少し小さく */
    }

    .p-career-interview-card__image {
        border-radius: 10px;
        /* 角丸を少し控えめに */
        margin-bottom: 10px;
    }

    .p-career-interview-card__post {
        font-size: 11px;
        /* 肩書きの文字サイズを調整 */
        min-height: 2.8em;
        /* 高さを詰める */
        margin-bottom: 8px;
    }

    .c-button-interview {
        font-size: 12px;
        padding: 4px 12px;
        white-space: nowrap;
        /* ボタン内の改行を防ぐ */
    }

    .p-career-data-grid {
        display: flex;
        flex-direction: column;
    }

    /* --- Data Analytics: 職種グラフ (Chart.js用) --- */

    .p-career-data-item__chart {
        width: 160px;
        height: 160px;
    }

    /* 1. 男女比アイコンの拡大率をスマホ用に抑える */
    .p-career-data-item__chart--gender {
        min-height: auto;
        /* スマホでは高さを自動に */
        padding: 20px 0;
        gap: 30px;
        /* アイコン同士の間隔を少し詰める */
    }

    /* アニメーション完了後の状態（スマホ用） */
    .p-career-data-item__chart--gender.is-active .p-career-gender-group {
        opacity: 1;
        /* スマホでは1.2倍程度に留めるとバランスが良いです */
        transform: scale(1.2);
    }

    /* 2. 凡例（ラベル）をスマホでは1列に並べて読みやすくする */
    .p-career-legend-list {
        grid-template-columns: 1fr;
        /* 2列から1列へ */
        max-width: 100%;
        /* 中央に寄せるための幅調整 */
        margin: 0 auto;
    }

    /* 1. 各職種の行を縦並びに変更 */
    .p-career-employee-row {
        display: flex;
        flex-direction: column;
        /* 縦並び */
        align-items: center;
        gap: 8px;
        /* 各要素の間隔 */
        margin-bottom: 25px;
        /* 行間の余白 */
    }

    /* 2. 職種ラベル（看護師など）の調整 */
    .p-career-employee-label {
        width: auto;
        /* 幅指定を解除 */
        text-align: center;
        font-size: 15px;
        /* 少し大きく */
        margin-bottom: 5px;
        /* アイコンとの間隔 */
    }

    /* 3. 人数（12名など）の調整 */
    .p-career-employee-num {
        width: auto;
        /* 幅指定を解除 */
        text-align: center;
        font-size: 15px;
        /* 文字を少し大きく */
        margin-top: 5px;
        /* アイコンとの間隔 */
    }

    /* 4. アイコン画像コンテナの調整（中央寄せ、折り返し） */
    .p-career-employee-icons {
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
        /* 画面幅が狭い時に自動で折り返す */
        gap: 3px;
        /* アイコン同士の隙間を少し広げる */
        margin: 0;
        /* マージンをリセット */
        /* 1行のアイコン数を制限したい場合の例 */
        /* max-width: 150px; */
        /* 1行に約7個並ぶ幅 */
    }

    /* 5. アイコン画像自体のサイズ調整（視認性確保） */
    .p-career-person-icon {
        width: 12px;
        height: auto;
        margin-right: 0;
        /* 右マージンを解除してgapで制御 */
        /* アニメーションの初期状態（ scale(1) のままふわっと出す） */
        transform: scale(1);
    }

    /* --- Recuruitment Section --- */

    .p-career-recruit-group {
        display: flex;
        flex-direction: column;
        gap: 30px;
        /* 見出しとコンテンツの間隔 */
    }

    .p-career-recruit-sticky-h3 {
        position: static;
        /* 固定を解除 */
        width: 100%;
        text-align: left;
        margin-bottom: 10px;
        font-size: clamp(20px, 5vw, 24px);
        /* スマホ用に少しサイズダウン */
        white-space: nowrap;
        /* 意図しない場所での折り返しを防ぐ */
        line-height: 1.4;
    }

    /* PCでのみ有効な改行 */
    .u-only-pc {
        display: none;
    }

    /* 3. テーブルエリアの調整 */
    .p-career-recruit-content {
        width: 100%;
    }

    /* 4. テーブルを1カラム化（必要に応じて） */
    .p-career-recruit-table {
        display: block;
    }

    .p-career-recruit-table tr {
        display: flex;
        flex-direction: column;
        padding-bottom: 15px;
        border-bottom: 1px solid rgba(237, 122, 144, 0.1);
    }

    .p-career-recruit-table th {
        width: 100px;
        padding: 10px 0 5px;
        border-bottom: none;
        color: #ED7A90;
        /* 項目名を強調 */
        font-size: 13px;
    }

    .p-career-recruit-table td {
        width: 100%;
        padding: 0 0 10px;
        border-bottom: none;
        font-size: 14px;
    }

    /* --- Recruitment: エントリーカード --- */
    .p-career-recruit-entry-card {
        flex-direction: column;
        /* 1. 縦並びに切り替え */
        align-items: stretch;
        /* 2. 横幅をいっぱいまで広げる */
        margin-top: 40px;
        /* 余白をスマホ用に調整 */
    }

    /* 上側：画像エリア */
    .p-career-recruit-entry-card__image {
        flex: none;
        /* PCの比率を解除 */
        width: 100%;
        height: 200px;
        /* 3. スマホでの画像の高さを固定（お好みで調整） */
    }

    .p-career-recruit-entry-card__image img {
        /* object-positionは左寄せのままでOK。
           もし中央を見せたい場合は center center に上書きしてください */
        object-position: center center;
    }

    /* 下側：テキストエリア */
    .p-career-recruit-entry-card__content {
        padding: 40px 20px;
        /* 4. スマホ用の内側余白に調整 */
        text-align: center;
        /* 5. スマホでは中央寄せが読みやすい */
        align-items: center;
    }

    .p-career-recruit-entry-card__title {
        font-size: 16px;
        /* 6. 文字サイズをスマホ向けにダウン */
        margin-top: 0;
        /* PCで付けたマージンをリセット */
        margin-bottom: 20px;
        text-align: left;
    }

    .p-career-recruit-entry-card__text,
    .p-career-recruit-entry-card__note {
        font-size: 13px;
        text-align: left;
        width: 100%;
    }

    /* --- Process Section --- */

    .p-career-process-group {
        display: block;
    }

    .p-career-flow-step {
        width: 80px;
        height: 88px;
        font-size: 14px;
        padding-bottom: 22px;
    }

    /* 2. テキスト側の開始位置調整 */
    .p-career-flow-body {
        /* 図形内の「STEP 01」の高さに合わせて、
           PC時の 16px からスマホ用に微調整 */
        padding-top: 10px;
    }

    /* 3. タイトルと本文のサイズ微調整 */
    .p-career-flow-title {
        font-size: 18px;
        margin-bottom: 10px;
    }

    .p-career-flow-text {
        font-size: 14px;
        line-height: 1.6;
    }

    /* 4. ステップを繋ぐ線の位置調整（図形が小さくなった分、左に寄せる） */
    .p-career-flow-item:not(:last-child)::after {
        left: 40px;
        /* 80pxの図形の真ん中 */
        top: 80px;
        /* 図形の先端付近 */
        bottom: -30px;
    }

    /* --- Interview Modal --- */

    .p-career-article {
        padding: 10px 25px 60px;
    }

    /* --- モーダル内の文字サイズと余白の微調整 --- */
    .p-career-article__post {
        bottom: 10px;
        right: 10px;
        font-size: 11px;
        padding: 10px;
        max-width: 90%;
    }

    .p-career-article__title {
        font-size: 22px;
        line-height: 1.4;
        margin-bottom: 20px;
    }

    .p-career-article__lead {
        padding: 20px;
        font-size: 14px;
        line-height: 1.8;
        border-radius: 10px;
        /* 角丸を少し控えめに */
    }

    .p-career-article__section-title {
        font-size: 20px;
    }

    .p-career-article__question {
        font-size: 16px;
        /* スマホではマーカーを少し細くする場合（透明部分を70%に） */
        background: linear-gradient(transparent 70%, rgba(237, 122, 144, 0.2) 0%);
    }

    /* アイコンとテキストの間隔を調整 */
    .p-career-article__answer {
        gap: 12px;
        margin-bottom: 20px;
    }

    /* テキストのフォントサイズと位置合わせ */
    .p-career-article__answer-text {
        font-size: 15px;
        font-size: 14px;
        line-height: 1.7;
        padding-top: 2px;
        /* アイコンの中心と文字の1行目を合わせる */
        text-align: start !important;
    }

    /* 段落間の余白 */
    .p-career-article__answer:not(:last-child) {
        margin-bottom: 15px;
    }

    /* 閉じるボタン：スマホでは押しやすい位置に固定 */
    .p-career-modal__close-btn {
        top: 10px;
        right: 10px;
        /* 左からの計算ではなく右端からの距離で指定 */
        width: 36px;
        height: 36px;
        background: rgba(238, 238, 238, 0.9);
        /* 少し透明度を上げると背景に馴染みます */
    }

    .p-career-article__footer {
        flex-direction: column-reverse;
        /* 「一覧に戻る」を下にする */
        gap: 15px;
    }

    /* INDEX（目次）エリアのスマホ調整 */
    .p-career-article__index {
        padding: 20px;
        margin-top: 20px;
    }

    #js-modal-index-list li {
        font-size: 14px;
        margin-bottom: 10px;
        /* 項目間を少し広げてタップしやすく */
    }

    /* 本文内の見出し（H2, H3）をスマホ向けにダウンサイジング */
    .p-career-article__content h2 {
        font-size: 20px;
        margin: 40px 0 20px;
    }

    .p-career-article__content h3 {
        font-size: 16px;
        margin-top: 30px;
    }

    .p-career-article__staff-icon {
        width: 40px;
        height: 40px;
    }

    /* --- ACCESS SECTION --- */

    .p-lp-access__map {
        margin-bottom: 32px;
    }

    .p-lp-access__map iframe {
        height: 300px;
    }

    .p-lp-access__info {
        padding: 30px 20px;
    }

    .p-lp-access__list {
        grid-template-columns: 1fr;
    }

    .p-lp-access__list dt {
        padding-bottom: 5px;
        border-bottom: none;
    }

    .p-lp-access__list dd {
        padding-top: 5px;
        padding-bottom: 20px;
    }

    /* --- footer-career.php --- */
    .l-footer-career__inner {
        flex-direction: column;
        align-items: flex-start;
        padding-bottom: 40px;
    }

    .l-footer-career__right {
        align-items: center;
        width: 100%;
        gap: 40px;
    }

    .l-footer-career__nav {
        gap: 30px;
    }

    .l-footer-career__nav-group {
        width: 100%;
        /* スマホでは縦に並べるか、お好みで2列に */
    }

    .l-footer-career__entry-btn {
        width: 100%;
    }

    /* エントリーボタン */
    .c-button-entry-large {
        width: 80%;
        /* 7. スマホではボタンを横いっぱいに広げて押しやすく */
        padding: 15px 8px;
        font-size: 16px;
    }


    /* --- Entry Page Styles --- */
    .p-entry-card {
        padding: 40px 20px;
    }

}

@media (max-width: 767px) {
    .p-career-hero__card {
        padding: 40px 20px;
        width: 90%;
    }

    .p-career-hero__logo {
        width: 50px;
    }

    .p-career-hero__inner {
        max-width: 340px;
        /* スマホ画像の横幅に合わせて調整 */
    }

    .p-career-hero__signature {
        margin-top: 20px;
        justify-content: flex-end;
        /* スマホでは中央寄せの方がバランスが良い場合が多いです */
    }

    .js-modal-nav-btn {
        width: 40px;
        height: 40px;
    }

    .c-modal-entry-popup {
        width: 75px;
        height: 75px;
        font-size: 10px;
        margin-top: 20px;
    }

    .p-entry-hero {
        min-height: 100vh;
        padding-top: 100px;
        padding-bottom: 60px;
    }

    .p-entry-hero.is-success {
        min-height: auto;
        padding-top: 80px;
        padding-bottom: 40px;
    }

    .p-entry-success {
        padding: 20px 0;
    }

    .p-career-service-sub-title {
        font-size: 16px;
    }

    .p-career-service-tags {
        font-size: 10px;
        padding: 0;
    }

    .p-career-service-tags__text {
        padding: 2px 8px;
    }

    .p-career-service-tags__divider {
        margin: 0 5px;
    }
}

@media (max-width: 480px) {

    /* page-career.php 
    ------------------------------------------------------------*/

    /* --- Service: Layout --- */

    .p-career-service-card__grid {
        grid-template-columns: 1fr;
        /* 非常に狭い画面では1列に */
    }
}

/* エントリーページのみ、特定の要素を隠す */
.is-page-entry .l-header-career__nav,
.is-page-entry .l-header-career__cta,
.is-page-entry .l-footer-career__nav,
.is-page-entry .c-entry-popup,
.is-page-entry .l-footer-career__right .c-button-entry-large,
.is-page-entry .l-header-career__hamburger {
    display: none !important;
}