@charset "UTF-8";
/*
Theme Name: NANO
Theme URI:https://tcd-theme.com/tcd065
Description:"NANO" is a WordPress theme that allows you to create a large corporate website at a low cost. The multi-level site structure organized and transmits a wide range of business info. Also you can easy to design the top page that conveys your company's message and achievements.
Author:TCD
Author URI:https://tcd-theme.com/
Text Domain: tcd-nano
Version:1.9
*/
/* ========================================================================== Foundation ========================================================================== */
/*! normalize.css v7.0.0 | MIT License | github.com/necolas/normalize.css */
/* Document ====================================/* ==========================================================================
   Custom Styles for Recruiting Site (Cleaned Up)
   ========================================================================== */

/* --------------------------------------------------------------------------
   Common & Base Layout
   -------------------------------------------------------------------------- */
body {
    font-family: "Zen Kaku Gothic New", "Noto Sans JP", sans-serif;
    color: #333;
}

.l-main {
    overflow: hidden;
    position: relative;
    top: 0px;
    border-top: 1px solid #ddd;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    box-sizing: border-box;
    width: 100%;
}

/* Section Headers */
.section-header-center {
    text-align: center;
    margin-bottom: 60px;
}


/* 文字サイズ */
.kanji { font-size: 160px; }
.hiragana { font-size: 100px; }

.header-en {
    display: block;
    color: #0044CC;
    font-size: 14px;
    font-family: 'Oswald', sans-serif;
    letter-spacing: 0.1em;
    font-weight: 700;
    margin-bottom: 10px;
}

.header-jp {
    font-size: 36px;
    font-weight: 700;
    margin: 0;
}

.header-desc {
    font-size: 15px;
    line-height: 1.8;
    color: #666;
    margin-top: 15px;
}

/* Buttons */
.btn {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    text-decoration: none;
    font-size: 16px;
    font-weight: 700;
    padding: 20px 45px;
    border-radius: 50px;
    transition: all 0.3s ease;
    width: fit-content;
    position: relative;
    font-family: "Noto Sans JP", sans-serif;
    box-sizing: border-box;
}

.btn .arrow {
    margin-left: 10px;
    font-weight: 400;
    transition: transform 0.3s ease;
}

.btn:hover .arrow {
    transform: translateX(5px);
}

.btn-primary {
    background-color: #0044CC;
    color: #fff;
    border: 2px solid #0044CC;
    box-shadow: 0 4px 10px rgba(0, 68, 204, 0.3);
}

.btn-primary:hover {
    background-color: #003399;
    border-color: #003399;
    transform: translateY(-2px);
}

.btn-secondary {
    background-color: transparent;
    color: #0044CC;
    border: 2px solid #0044CC;
}

.btn-secondary:hover {
    background-color: #0044CC;
    color: #fff;
    transform: translateY(-2px);
}

.btn-area-center {
    text-align: center;
    margin-top: 50px;
}

/* --------------------------------------------------------------------------
   1. Hero Section (Animation)
   -------------------------------------------------------------------------- */
.p-header-slider__item {
    width: 100%;
    top: 0px;
    height: 850px;
    overflow: hidden;
    position: relative;
}


.hero-container {
    position: absolute;
    top: 40%;
    left: 5%;
    transform: translateY(-50%) rotate(-7deg);
    z-index: 10;
    width: auto;
    padding: 0;
    margin: 0;
}
.hero-text {
    font-family: "Noto Sans JP", sans-serif;
    font-weight: 700;
    color: #00a1ff;
    line-height: 1.3;
    margin: 10px 0;
    word-break: keep-all; 
    overflow-wrap: anywhere; 
    display: flex;
    align-items: baseline;
    justify-content: flex-start;
    gap: 0.11em;
    opacity: 0;
    transform: translateX(-80px);
    transition: opacity 1.5s cubic-bezier(0.16, 1, 0.3, 1), transform 1.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.hero-text.fade-in {
    opacity: 1;
    transform: translateX(0);
}


/* --------------------------------------------------------------------------
   2. Business Section
   -------------------------------------------------------------------------- */
.business-section {
    position: relative;
    padding: 100px 0;
    background-color: #fdfdfd;
    overflow: hidden;
}

.bg-vertical-text {
    position: absolute;
    top: -50px;
    left: 0;
    font-size: 180px;
    font-weight: 700;
    color: #f2f2f2;
    line-height: 1;
    z-index: 0;
    pointer-events: none;
    font-family: "Noto Sans JP", sans-serif;
}

.business-content-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    z-index: 1;
    margin-top: 50px;
}

.business-text {
    width: 45%;
    padding-right: 40px;
}

.section-header { margin-bottom: 40px; position: relative; }
.sub-en { display: block; font-size: 14px; font-weight: 700; color: #0044CC; letter-spacing: 0.1em; margin-bottom: 10px; font-family: sans-serif; }
.main-jp { font-size: 48px; font-weight: 700; line-height: 1.3; letter-spacing: 0.05em; margin: 0; }

.description p {
    font-size: 16px;
    line-height: 2;
    color: #555;
    margin-bottom: 30px;
    text-align: justify;
}

.cta-group {
    margin-top: 40px;
    display: flex;
    gap: 20px;
    position: relative;
}

.business-image { width: 50%; }
.business-image img { width: 100%; height: auto; display: block; border-radius: 4px; box-shadow: 20px 20px 0px #f0f0f0; }

/* --------------------------------------------------------------------------
   3. Work Intro Section
   -------------------------------------------------------------------------- */
/* --- 仕事紹介セクション全体 --- */
.work-intro-section {
    padding: 120px 0;
    background-color: #fff;
    overflow: hidden;
}

/* 共通コンテナ */
.container {
    max-width: 1100px; /* 少し幅を絞って引き締める */
    margin: 0 auto;
    padding: 0 20px;
}

/* --- 1. メイン（新卒募集）リスト --- */
.work-main-list {
    display: flex;
    flex-direction: column;
    gap: 120px; /* 上下の間隔を広げてリッチに */
    margin-top: 80px;
    margin-bottom: 100px;
}

.work-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
}

/* 偶数番目のアイテムを左右反転 */
.work-item.work-reverse {
    flex-direction: row-reverse;
}

/* 画像エリア */
.work-img {
    width: 52%;
    position: relative;
    z-index: 1;
}

.work-img img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 8px;
    box-shadow: 0 20px 40px rgba(0,0,0,0.1);
    transition: transform 0.6s cubic-bezier(0.215, 0.610, 0.355, 1.000);
}

.work-item:hover .work-img img {
    transform: scale(1.03);
}

/* 「新卒募集中」バッジ */
.work-badge {
    /* 既存のスタイルを上書き */
    margin-left: auto;
    
    /* 目立つグラデーション背景に変更 */
    background: linear-gradient(135deg, #ff3366 0%, #ff5e62 100%);
    
    /* 文字色 */
    color: #fff;
    
    /* サイズを少し大きく */
    font-size: 14px; /* 12pxからアップ */
    padding: 8px 20px; /* 余白を広げる */
    
    /* 角丸を強くして今っぽく */
    border-radius: 50px;
    
    /* 文字の太さ */
    font-weight: 700;
    letter-spacing: 0.05em;
    
    /* 影をつけて浮かせる */
    box-shadow: 0 4px 10px rgba(255, 51, 102, 0.4);
    
    /* 位置調整（微調整） */
    transform: translateY(-2px);
    
    /* スマホで改行されないように */
    white-space: nowrap;
}

/* テキストエリア */
.work-content {
    width: 40%;
    position: relative;
    z-index: 2;
}

/* 背景の数字 */
.bg-number {
    position: absolute;
    top: -90px;
    left: -30px;
    font-size: 160px;
    font-family: 'Oswald', sans-serif;
    font-weight: 700;
    color: #f4f4f4; /* かなり薄く */
    line-height: 1;
    z-index: -1;
    pointer-events: none;
}

.work-reverse .bg-number {
    left: auto;
    right: -30px;
}

/* タイトル周り */
.work-title {
    margin-bottom: 15px;
}

.work-title-en {
    display: block;
    font-size: 14px;
    color: #0044CC;
    font-family: 'Oswald', sans-serif;
    letter-spacing: 0.1em;
    font-weight: 700;
    margin-bottom: 5px;
}

.work-title-jp {
    display: block;
    font-size: 32px;
    font-weight: 700;
    line-height: 1.2;
}

.work-sub {
    font-size: 16px;
    font-weight: 700;
    color: #333;
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 2px solid #0044CC;
    display: inline-block;
}

.work-desc {
    font-size: 15px;
    line-height: 1.9;
    color: #666;
    text-align: justify;
}

/* --- 2. サブ（その他の職種）エリア --- */
.work-sub-area {
    background-color: #f9f9f9;
    padding: 60px 40px;
    border-radius: 12px;
    text-align: center;
}

.sub-area-title {
    font-family: 'Oswald', sans-serif;
    font-size: 24px;
    color: #333;
    margin: 0 0 10px 0;
}

.sub-area-desc {
    font-size: 14px;
    color: #666;
    margin-bottom: 40px;
}

/* 3列グリッド */
.work-sub-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

/* サブカード */
.sub-work-card {
    background-color: #fff;
    padding: 30px 20px;
    border-radius: 8px;
    border: 1px solid #eee;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.sub-work-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.05);
    border-color: #0044CC;
}

.sub-card-icon {
    font-size: 40px;
    margin-bottom: 15px;
    /* アイコン画像を使う場合は以下のように調整 */
    /* width: 50px; height: 50px; object-fit: contain; */
}

.sub-work-card h4 {
    font-size: 18px;
    font-weight: 700;
    margin: 0 0 5px 0;
    color: #333;
}

.sub-work-card p {
    font-size: 12px;
    color: #999;
    font-family: 'Oswald', sans-serif;
    margin: 0;
}


/* --- スマホ対応 (レスポンシブ) --- */
@media (max-width: 900px) {
    /* メインエリア */
    .work-item, 
    .work-item.work-reverse {
        flex-direction: column;
        gap: 30px;
        margin-bottom: 80px;
    }
    
    .work-img, 
    .work-content {
        width: 100%;
    }

    .bg-number {
        font-size: 100px;
        top: -50px;
        left: 0;
    }
    .work-reverse .bg-number { left: 0; right: auto; } /* スマホでは左寄せに統一 */

    /* サブエリア */
    .work-sub-area {
        padding: 40px 20px;
    }

    .work-sub-grid {
        grid-template-columns: 1fr; /* 1列にする */
        gap: 15px;
    }
    
    .sub-work-card {
        flex-direction: row; /* スマホでは横並びカードにすると見やすい */
        justify-content: flex-start;
        padding: 20px;
        gap: 20px;
    }
    
    .sub-card-icon {
        margin-bottom: 0;
        font-size: 32px;
    }
    
    .sub-card-content {
        text-align: left;
    }
}
/* --------------------------------------------------------------------------
   4. Interview Section (Refined)
   -------------------------------------------------------------------------- */
.interview-section {
    padding: 120px 0;
    background-color: #fdfdfd;

}

.interview-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 50px; /* カード間の余白を調整 */
    max-width: 900px; /* 少し幅を広げてゆとりを持たせる */
    margin: 0 auto;
}

/* カード全体 */
.interview-card {
    text-decoration: none;
    color: #333;
    display: flex;
    flex-direction: column;
    cursor: pointer;
    position: relative;
    background: #fff;
    border-radius: 12px; /* 角を丸く */
    overflow: hidden; /* 角丸からはみ出さないように */
    box-shadow: 0 5px 15px rgba(0,0,0,0.05); /* 浮いているような影 */
    transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
    border: 1px solid rgba(0,0,0,0.03);
}

/* ホバー時のカード全体の動き */
.interview-card:hover {
    transform: translateY(-10px); /* ふわりと浮き上がる */
    box-shadow: 0 20px 40px rgba(0, 68, 204, 0.15); /* 青みがかった影で強調 */
}

/* 画像エリア */
.interview-img-box {
    width: 100%;
    aspect-ratio: 3 / 2; /* 横長（3:2）に変更して顔を見やすく（元が縦長なら 3/4 のままでOK） */
    overflow: hidden;
    position: relative;
    margin: 0; /* マージンリセット */
}

.interview-img-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 20%; /* 顔の位置に合わせる（上寄り） */
    transition: transform 0.6s ease;
}

/* ホバーで画像拡大 */
.interview-card:hover .interview-img-box img {
    transform: scale(1.08);
}

/* 写真上のタグ (職種など) */
.interview-tag {
    position: absolute;
    top: 15px;
    left: 15px;
    background-color: rgba(0, 68, 204, 0.9); /* 少し透過させる */
    color: #fff;
    font-size: 11px;
    font-family: 'Oswald', sans-serif;
    font-weight: 700;
    padding: 6px 15px;
    border-radius: 50px; /* カプセル型 */
    letter-spacing: 0.05em;
    z-index: 2;
    box-shadow: 0 2px 10px rgba(0,0,0,0.2);
}

/* コンテンツエリア */
.interview-content {
    padding: 35px 30px;
    display: flex;
    flex-direction: column;
    flex-grow: 1; /* 高さ揃え */
}

/* キャッチコピー */
.interview-catch {
    font-size: 20px;
    font-weight: 700;
    line-height: 1.6;
    margin: 0 0 20px 0;
    color: #222;
    font-feature-settings: "palt";
    transition: color 0.3s ease;
}

.interview-card:hover .interview-catch {
    color: #0044CC; /* ホバーで青く */
}

/* 名前・年次 */
.interview-name {
    font-size: 13px;
    color: #666;
    margin-top: auto; /* 下に押しやる */
    margin-bottom: 25px;
    border-top: 1px solid #eee;
    padding-top: 15px;
    line-height: 1.8;
}

/* VIEW MORE ボタンデザイン */
.interview-link {
    font-size: 12px;
    font-weight: 700;
    color: #0044CC;
    font-family: 'Oswald', sans-serif;
    letter-spacing: 0.1em;
    display: flex;
    align-items: center;
    justify-content: flex-end; /* 右寄せ */
}

/* 矢印を丸いアイコンにする */
.interview-link .arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    background-color: #f0f4ff;
    border-radius: 50%;
    margin-left: 10px;
    font-size: 14px;
    transition: all 0.3s ease;
}

/* ホバー時に矢印が反転・移動 */
.interview-card:hover .interview-link .arrow {
    background-color: #0044CC;
    color: #fff;
    transform: translateX(5px);
}

/* --- スマホ対応 (レスポンシブ) --- */
@media (max-width: 768px) {
    .interview-section {
        padding: 80px 0;
    }

    .interview-grid {
        grid-template-columns: 1fr; /* 1列 */
        gap: 40px;
        padding: 0 20px;
    }

    .interview-img-box {
        aspect-ratio: 16 / 9; /* スマホでは少し横長にして画面占有率を下げる */
    }

    .interview-content {
        padding: 25px 20px;
    }

    .interview-catch {
        font-size: 18px;
    }
}
/* --------------------------------------------------------------------------
   5 & 6. Numbers & Welfare Digest Section
   -------------------------------------------------------------------------- */
.numbers-digest-section {
    padding: 100px 0;
    background-color: #fdfdfd;
}

.welfare-digest-section {
    padding: 100px 0;
    background-color: #fdfdfd;
}

/* Grids */
.digest-grid-numbers,
.digest-grid-welfare {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
    margin-bottom: 50px;
}

/* Common Card Style */
.stat-card, 
.welfare-card {
    height: 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: flex-start; /* 上揃え */
    align-items: center;
    
    background-color: #fff;
    border-radius: 12px;
    padding: 40px 25px;
    text-align: center;
    box-shadow: 0 5px 15px rgba(0,0,0,0.03);
    transition: all 0.3s ease;
    border: 1px solid transparent;
}

/* Welfare Card Specific */
.welfare-digest-section .welfare-card {
    background-color: #fdfdfd;
}

/* Hover Effects */
.stat-card:hover, .welfare-card:hover {
    background-color: #fff;
    transform: translateY(-5px);
    border-color: #0044CC;
    box-shadow: 0 15px 30px rgba(0, 68, 204, 0.15);
}

/* Icons (Images) */
.stat-icon {
    font-size: 40px;
    margin-bottom: 15px;
}

.welfare-icon {
    width: 90px;
    height: 90px;
    margin-bottom: 25px;
    background-color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
    transition: transform 0.3s ease;
}
.welfare-card:hover .welfare-icon { transform: scale(1.05); }

.welfare_img {
    width: auto;
    height: auto;
    max-width: 60%;
    max-height: 60%;
    object-fit: contain;
}

/* Card Text */
.stat-label { font-size: 18px; font-weight: 700; color: #555; margin: 0 0 20px 0; }
.stat-data { display: flex; align-items: baseline; justify-content: center; line-height: 1; color: #0044CC; margin-bottom: 10px; }
.counter { font-family: 'Oswald', sans-serif; font-size: 50px; font-weight: 700; }
.unit { font-size: 18px; font-weight: 700; margin-left: 5px; color: #333; }
.unit-prefix { font-size: 16px; font-weight: 700; margin-right: 5px; color: #888; }

.welfare-title {
    font-size: 18px;
    font-weight: 700;
    color: #333;
    margin: 0 0 15px 0;
    line-height: 1.4;
    font-feature-settings: "palt";
}
.welfare-text {
    font-size: 13px;
    line-height: 1.8;
    color: #666;
    margin: 0;
    width: 100%;
}

/* Highlight Card (100%) */
.highlight-card {
    border: 2px solid #0044CC;
    background-color: #f0f8ff;
}

/* --------------------------------------------------------------------------
   7. Recruit Info Section
   -------------------------------------------------------------------------- */
.recruit-info-section {
    position: relative;
	margin-bottom:100px;
    background-color: #fdfdfd;
    overflow: hidden;
}

.bg-recruit-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 25vw;
    font-family: 'Oswald', sans-serif;
    font-weight: 700;
    color: #f7f7f7;
    z-index: 0;
    pointer-events: none;
    line-height: 1;
    white-space: nowrap;
}

.recruit-info-section .container { position: relative; z-index: 1; }

.recruit-link-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
    max-width: 1000px;
    margin: 0 auto 60px auto;
}

.recruit-link-card {
    display: block;
    background-color: #fff;
    border: 1px solid #ddd;
    text-decoration: none;
    color: #333;
    padding: 50px 40px;
    transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1);
    position: relative;
}

.recruit-link-card:hover {
    background-color: #0044CC;
    border-color: #0044CC;
    color: #fff;
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(0, 68, 204, 0.2);
}

.card-inner { text-align: center; }
.cat-en { display: block; font-family: 'Oswald', sans-serif; font-size: 14px; letter-spacing: 0.1em; margin-bottom: 10px; opacity: 0.6; transition: opacity 0.3s; }
.recruit-link-card:hover .cat-en { opacity: 0.9; }
.cat-jp { font-size: 24px; font-weight: 700; margin: 0 0 20px 0; }
.cat-desc { font-size: 14px; line-height: 1.8; margin-bottom: 30px; opacity: 0.8; }
.card-arrow { display: inline-block; font-size: 20px; font-family: 'Oswald', sans-serif; transition: transform 0.3s; }
.recruit-link-card:hover .card-arrow { transform: translateX(10px); }

.entry-cta-area { text-align: center; margin-top: 80px; }
.entry-msg { font-size: 16px; margin-bottom: 20px; font-weight: 700; }

.big-entry-btn {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    text-decoration: none;
    background-color: #333;
    color: #fff;
    font-family: 'Oswald', sans-serif;
    font-size: 24px;
    font-weight: 700;
    letter-spacing: 0.1em;
    padding: 20px 80px;
    border-radius: 50px;
    transition: all 0.3s ease;
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}
.big-entry-btn:hover { background-color: #0044CC; transform: scale(1.05); box-shadow: 0 10px 25px rgba(0, 68, 204, 0.3); }
.big-entry-btn .btn-arrow { margin-left: 15px; transition: transform 0.3s; }
.big-entry-btn:hover .btn-arrow { transform: translateX(5px); }

/* --------------------------------------------------------------------------
   Modals (Popup)
   -------------------------------------------------------------------------- */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}
.modal-overlay.active { opacity: 1; visibility: visible; }

.modal-window {
    background-color: #fff;
    width: 90%;
    max-width: 600px;
    max-height: 90vh;
    border-radius: 8px;
    position: relative;
    box-shadow: 0 10px 40px rgba(0,0,0,0.3);
    transform: translateY(20px);
    transition: transform 0.3s ease;
    display: flex;
    flex-direction: column;
}
.modal-overlay.active .modal-window { transform: translateY(0); }

.modal-close {
    position: absolute;
    top: 15px;
    right: 15px;
    background: none;
    border: none;
    font-size: 32px;
    line-height: 1;
    color: #999;
    cursor: pointer;
    z-index: 10;
}
.modal-close:hover { color: #333; }

.modal-scroll-content { overflow-y: auto; padding: 40px; }
.modal-header { border-bottom: 2px solid #0044CC; margin-bottom: 30px; padding-bottom: 15px; }
.modal-role { display: block; font-size: 12px; color: #666; margin-bottom: 5px; }
.modal-name { font-size: 28px; font-weight: 700; margin: 0; }

.qa-item { margin-bottom: 30px; }
.qa-item:last-child { margin-bottom: 0; }
.qa-question { font-size: 16px; font-weight: 700; color: #0044CC; margin: 0 0 10px 0; display: flex; align-items: center; }
.qa-question::before { content: "Q."; font-family: 'Oswald', sans-serif; margin-right: 8px; font-size: 20px; }
.qa-answer { font-size: 14px; line-height: 1.8; color: #333; margin: 0; padding-left: 28px; }

/* --------------------------------------------------------------------------
   Mobile Responsiveness (Consolidated)
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {
    .work-item, .work-item.work-reverse { flex-direction: column; gap: 30px; }
    .work-img, .work-content { width: 100%; }
    .bg-number { font-size: 100px; top: -40px; left: 0; }
    
    .digest-grid-numbers, .digest-grid-welfare { grid-template-columns: repeat(2, 1fr); gap: 20px; }
}

@media (max-width: 768px) {
    /* Hero */
    .hero-container { width: 100%; transform: rotate(0); padding-top: 100px; }
    .kanji { font-size: 42px; }
    .hiragana { font-size: 22px; }
    .hero-text { transform: translateX(-20px); font-size: 28px; }

    /* Business */
    .bg-vertical-text { font-size: 60px; top: 0; left: 20px; }
    .business-content-wrapper { flex-direction: column; margin-top: 60px; }
    .business-text { width: 100%; padding-right: 0; margin-bottom: 50px; }
    .main-jp { font-size: 32px; }
    .description p { font-size: 12px; text-align: left; }
    .business-image { width: 100%; }
    .cta-group { width: 100%; flex-direction: column; }
    .btn { width: 100%; }

    /* Interview */
    .interview-grid { grid-template-columns: 1fr; gap: 50px; max-width: 100%; }
    .interview-img-box { aspect-ratio: 4 / 3; }
    .modal-scroll-content { padding: 30px 20px; }
    .modal-name { font-size: 24px; }
    .qa-answer { padding-left: 0; }

    /* Digest Cards (Numbers & Welfare) */
    .digest-grid-numbers, .digest-grid-welfare { gap: 10px; }
    .stat-card, .welfare-card { padding: 25px 15px; }
    .stat-icon { font-size: 30px; }
    .welfare-icon { width: 70px; height: 70px; margin-bottom: 15px; }
    .welfare-title { font-size: 14px; margin-bottom: 10px; }
    .welfare-text { font-size: 11px; }
    .counter { font-size: 36px; }

    /* Recruit Info */
    .bg-recruit-text { font-size: 80px; }
    .recruit-link-grid { grid-template-columns: 1fr; gap: 20px; }
    .cat-jp { font-size: 20px; }
    .big-entry-btn { width: 90%; padding: 15px 0; font-size: 20px; }
}====================================== */
/** 1. Correct the line height in all browsers. 2. Prevent adjustments of font size after orientation changes in IE on Windows Phone and in iOS. */
html { line-height: 1.15; /* 1 */ -ms-text-size-adjust: 100%; /* 2 */ -webkit-text-size-adjust: 100%; /* 2 */ }

/* Sections ========================================================================== */
/** Remove the margin in all browsers (opinionated). */
body { margin: 0; }

/** Add the correct display in IE 9-. */f
article, aside, footer, header, nav, section { display: block; }

/** Correct the font size and margin on `h1` elements within `section` and `article` contexts in Chrome, Firefox, and Safari. */
h1 { font-size: 2em; margin: 0.67em 0; }

/* Grouping content ========================================================================== */
/** Add the correct display in IE 9-. 1. Add the correct display in IE. */
figcaption, figure, main { /* 1 */ display: block; }

/** Add the correct margin in IE 8. */
figure { margin: 1em 40px; }

/** 1. Add the correct box sizing in Firefox. 2. Show the overflow in Edge and IE. */
hr { box-sizing: content-box; /* 1 */ height: 0; /* 1 */ overflow: visible; /* 2 */ }

/** 1. Correct the inheritance and scaling of font size in all browsers. 2. Correct the odd `em` font sizing in all browsers. */
pre { font-family: monospace, monospace; /* 1 */ font-size: 1em; /* 2 */ }

/* Text-level semantics ========================================================================== */
/** 1. Remove the gray background on active links in IE 10. 2. Remove gaps in links underline in iOS 8+ and Safari 8+. */
a { background-color: transparent; /* 1 */ -webkit-text-decoration-skip: objects; /* 2 */ }

/** 1. Remove the bottom border in Chrome 57- and Firefox 39-. 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. */
abbr[title] { border-bottom: none; /* 1 */ text-decoration: underline; /* 2 */ -webkit-text-decoration: underline dotted; text-decoration: underline dotted; /* 2 */ }

/** Prevent the duplicate application of `bolder` by the next rule in Safari 6. */
b, strong { font-weight: inherit; }

/** Add the correct font weight in Chrome, Edge, and Safari. */
b, strong { font-weight: bolder; }

/** 1. Correct the inheritance and scaling of font size in all browsers. 2. Correct the odd `em` font sizing in all browsers. */
code, kbd, samp { font-family: monospace, monospace; /* 1 */ font-size: 1em; /* 2 */ }

/** Add the correct font style in Android 4.3-. */
dfn { font-style: italic; }

/** Add the correct background and color in IE 9-. */
mark { background-color: #ff0; color: #000; }

/** Add the correct font size in all browsers. */
small { font-size: 80%; }

/** Prevent `sub` and `sup` elements from affecting the line height in all browsers. */
sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; }

sub { bottom: -0.25em; }

sup { top: -0.5em; }

/* Embedded content ========================================================================== */
/** Add the correct display in IE 9-. */
audio, video { display: inline-block; }

/** Add the correct display in iOS 4-7. */
audio:not([controls]) { display: none; height: 0; }

/** Remove the border on images inside links in IE 10-. */
img { border-style: none; }

/** Hide the overflow in IE. */
svg:not(:root) { overflow: hidden; }

/* Forms ========================================================================== */
/** 1. Change the font styles in all browsers (opinionated). 2. Remove the margin in Firefox and Safari. */
button, input, optgroup, select, textarea { font-family: sans-serif; /* 1 */ font-size: 100%; /* 1 */ line-height: 1.15; /* 1 */ margin: 0; /* 2 */ }

/** Show the overflow in IE. 1. Show the overflow in Edge. */
button, input { /* 1 */ overflow: visible; }

/** Remove the inheritance of text transform in Edge, Firefox, and IE. 1. Remove the inheritance of text transform in Firefox. */
button, select { /* 1 */ text-transform: none; }

/** 1. Prevent a WebKit bug where (2) destroys native `audio` and `video` controls in Android 4. 2. Correct the inability to style clickable types in iOS and Safari. */
button, html [type="button"], [type="reset"], [type="submit"] { -webkit-appearance: button; /* 2 */ }

/** Remove the inner border and padding in Firefox. */
button::-moz-focus-inner, [type="button"]::-moz-focus-inner, [type="reset"]::-moz-focus-inner, [type="submit"]::-moz-focus-inner { border-style: none; padding: 0; }

/** Restore the focus styles unset by the previous rule. */
button:-moz-focusring, [type="button"]:-moz-focusring, [type="reset"]:-moz-focusring, [type="submit"]:-moz-focusring { outline: 1px dotted ButtonText; }

/** Correct the padding in Firefox. */
fieldset { padding: 0.35em 0.75em 0.625em; }

/** 1. Correct the text wrapping in Edge and IE. 2. Correct the color inheritance from `fieldset` elements in IE. 3. Remove the padding so developers are not caught out when they zero out `fieldset` elements in all browsers. */
legend { box-sizing: border-box; /* 1 */ color: inherit; /* 2 */ display: table; /* 1 */ max-width: 100%; /* 1 */ padding: 0; /* 3 */ white-space: normal; /* 1 */ }

/** 1. Add the correct display in IE 9-. 2. Add the correct vertical alignment in Chrome, Firefox, and Opera. */
progress { display: inline-block; /* 1 */ vertical-align: baseline; /* 2 */ }

/** Remove the default vertical scrollbar in IE. */
textarea { overflow: auto; }

/** 1. Add the correct box sizing in IE 10-. 2. Remove the padding in IE 10-. */
[type="checkbox"], [type="radio"] { box-sizing: border-box; /* 1 */ padding: 0; /* 2 */ }

/** Correct the cursor style of increment and decrement buttons in Chrome. */
[type="number"]::-webkit-inner-spin-button, [type="number"]::-webkit-outer-spin-button { height: auto; }

/** 1. Correct the odd appearance in Chrome and Safari. 2. Correct the outline style in Safari. */
[type="search"] { -webkit-appearance: textfield; /* 1 */ outline-offset: -2px; /* 2 */ }

/** Remove the inner padding and cancel buttons in Chrome and Safari on macOS. */
[type="search"]::-webkit-search-cancel-button, [type="search"]::-webkit-search-decoration { -webkit-appearance: none; }

/** 1. Correct the inability to style clickable types in iOS and Safari. 2. Change font properties to `inherit` in Safari. */
::-webkit-file-upload-button { -webkit-appearance: button; /* 1 */ font: inherit; /* 2 */ }

/* Interactive ========================================================================== */
/* Add the correct display in IE 9-. 1. Add the correct display in Edge, IE, and Firefox. */
details, menu { display: block; }

/* Add the correct display in all browsers. */
summary { display: list-item; }

/* Scripting ========================================================================== */
/** Add the correct display in IE 9-. */
canvas { display: inline-block; }

/** Add the correct display in IE. */
template { display: none; }

/* Hidden ========================================================================== */
/** Add the correct display in IE 10-. */
[hidden] { display: none; }

* { box-sizing: border-box; }

body { color: #000; line-height: 1; -webkit-font-smoothing: antialiased; font-family: "Zen Kaku Gothic New", sans-serif; }

a { color: #000; text-decoration: none; transition-property: background-color, color; transition-duration: 0.2s; transition-timing-function: ease; }

img { vertical-align: bottom; }

h1, h2, h3, h4, h5, h6, p, ol, ul { margin-top: 0; }

p { margin-bottom: 0; }

ol, ul { padding-left: 0; list-style: none; }

.admin-bar { padding-top: 32px; }

/* -------------------------------------------------------------------------------- web fonts　ウェブフォントファイルを変更した場合はv=1.0の数字を変更（キャッシュ対策） -------------------------------------------------------------------------------- */
@font-face { font-family: "design_plus"; src: url("assets/fonts/design_plus.eot?v=1.0"); src: url("assets/fonts/design_plus.eot?v=1.0#iefix") format("embedded-opentype"), url("assets/fonts/design_plus.woff?v=1.0") format("woff"), url("assets/fonts/design_plus.ttf?v=1.0") format("truetype"), url("assets/fonts/design_plus.svg?v=1.0#design_plus") format("svg"); font-weight: normal; font-style: normal; }
@font-face { font-family: "update_icon"; src: url("assets/fonts/update_icon.eot?v=1.2"); src: url("assets/fonts/update_icon.eot?v=1.2#iefix") format("embedded-opentype"), url("assets/fonts/update_icon.woff?v=1.2") format("woff"), url("assets/fonts/update_icon.ttf?v=1.2") format("truetype"), url("assets/fonts/update_icon.svg?v=1.2#update_icon") format("svg"); font-weight: normal; font-style: normal; }

@font-face {
  font-family: 'tiktok_x_icon';
  src: url('assets/fonts/tiktok_x_icon.eot?v=1.0');
  src: url('assets/fonts/tiktok_x_icon.eot?v=1.0#iefix') format('embedded-opentype'),
       url('assets/fonts/tiktok_x_icon.woff?v=1.0') format('woff'),
       url('assets/fonts/tiktok_x_icon.ttf?v=1.0') format('truetype'),
       url('assets/fonts/tiktok_x_icon.svg?v=1.0#tiktok_x_icon') format('svg');
  font-weight: normal;
  font-style: normal;
}

/* keyframes */
@-webkit-keyframes fadeIn { from { opacity: 0; }
  to { opacity: 1; } }
@keyframes fadeIn { from { opacity: 0; }
  to { opacity: 1; } }

@-webkit-keyframes fadeOut { from { visibility: visible;
    opacity: 1; }
  to { visibility: hidden;
    opacity: 0; } }

@keyframes fadeOut { from { visibility: visible;
    opacity: 1; }
  to { visibility: hidden;
    opacity: 0; } }

@-webkit-keyframes slideDown { 0% { top: -100%; }
  100% { top: 0; } }

@keyframes slideDown { 0% { top: -100%; }
  100% { top: 0; } }

@-webkit-keyframes slideUp { 0% { bottom: -100%; }
  100% { bottom: 0; } }

@keyframes slideUp { 0% { bottom: -100%; }
  100% { bottom: 0; } }

@-webkit-keyframes fadeInUp { from { opacity: 0;
    -webkit-transform: translateY(50%);
            transform: translateY(50%); }
  to { opacity: 1;
    -webkit-transform: translateY(0);
            transform: translateY(0); } }

@keyframes fadeInUp { from { opacity: 0;
    -webkit-transform: translateY(50%);
            transform: translateY(50%); }
  to { opacity: 1;
    -webkit-transform: translateY(0);
            transform: translateY(0); } }

@-webkit-keyframes zoom-in { 0% { -webkit-transform: scale(1); transform: scale(1); }
  100% { -webkit-transform: scale(1.2); transform: scale(1.2); } }

@keyframes zoom-in { 0% { -webkit-transform: scale(1); transform: scale(1); }
  100% { -webkit-transform: scale(1.2); transform: scale(1.2); } }

@-webkit-keyframes zoom-out { 0% { -webkit-transform: scale(1.2); transform: scale(1.2); }
  100% { -webkit-transform: scale(1); transform: scale(1); } }

@keyframes zoom-out { 0% { -webkit-transform: scale(1.2); transform: scale(1.2); }
  100% { -webkit-transform: scale(1); transform: scale(1); } }

@media screen and (max-width: 782px) { .admin-bar { padding-top: 46px; } }

.zen-kaku-gothic-new-regular {
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-weight: 400;
  font-style: normal;
}



.l-main { overflow: hidden; position: relative; top:0px; border-top:1px solid #ddd;}
.p-header-slider__item { width: 100%; top:0px; height: 850px; overflow: hidden; position: relative; }
.hero-container {
    position: absolute;
    top: 40%;
    left: 5%;
    transform: translateY(-50%) rotate(-7deg);
    z-index: 10;
    width: auto;
    padding: 0;
    margin: 0;
}

/* --- テキストの基本設定 --- */
.hero-text {
    /* ゴシック体・太字 */
    font-family: "Noto Sans JP", "Yu Gothic", "YuGothic", sans-serif;
    font-weight: 700;
    color: #00a1ff;
    line-height: 1.3;
    margin: 10px 0;
	word-break: keep-all; 
    overflow-wrap: anywhere; 

    /* 文字のベースラインを揃える */
    display: flex;
    align-items: baseline;
    justify-content: flex-start; /* 左揃えの場合は flex-start */
    gap: 0.11em; /* 文字同士の間隔を少し詰める調整 */

    /* --- アニメーション設定（左から右へ） --- */
    opacity: 0;
    transform: translateX(-80px); /* 左に配置 */
    transition: opacity 1.5s cubic-bezier(0.16, 1, 0.3, 1), transform 1.5s cubic-bezier(0.16, 1, 0.3, 1);
}



/* --- フェードイン発火時 --- */
.hero-text.fade-in {
    opacity: 1;
    transform: translateX(0); /* 元の位置へ */
}

/* --- レスポンシブ対応（スマホ向け） --- */
/* 135pxはスマホ画面に入りきらないため、比率を保って縮小します */
@media (max-width: 768px) {
    .kanji { font-size: 42px; }
    .hiragana { font-size: 22px; }
    
    .hero-text {
        transform: translateX(-40px); /* スマホでは移動距離を控えめに */
    }
}

/* スマホ版の文字サイズも、少し調整した方が安全かもしれません */
@media (max-width: 768px) {
    .hero-text {
        /* スマホでの改行崩れを防ぐため、必要に応じてフォントサイズを少し下げる */
        font-size: 28px; /* 元が40pxや36pxなら少し下げる */
    }
}

















/* --- BUSINESSセクション全体 --- */
.business-section {
    position: relative;
    padding: 100px 0;
    background-color: #fdfdfd;
    overflow: hidden; /* 背景文字のはみ出し防止 */
}

/* コンテナ設定 */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    position: relative;
}

/* --- 背景の巨大文字 (BUSINESS) --- */
.bg-vertical-text {
    position: absolute;
    top: -50px;
    left: 0;
    font-size: 180px;
    font-weight: 700;
    color: #f2f2f2; /* ごく薄いグレー */
    line-height: 1;
    z-index: 0; /* 一番奥に配置 */
    pointer-events: none; /* 文字を選択できないように */
    font-family: "Noto Sans JP", sans-serif;
}

/* --- コンテンツラッパー（横並びにする箱） --- */
.business-content-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center; /* 上下中央揃え */
    position: relative;
    z-index: 1; /* 背景文字より手前に */
    margin-top: 50px; /* 背景文字と被りすぎないよう調整 */
}

/* --- 左側：テキストエリア --- */
.business-text {
    width: 45%; /* 全体の45%の幅 */
    padding-right: 40px;
}

/* 見出し周り */
.section-header {
    margin-bottom: 40px;
	width:800px;
	position:relative;
}

.sub-en {
    display: block;
    font-size: 14px;
    font-weight: 700;
    color: #0044CC; /* アクセントカラー（青） */
    letter-spacing: 0.1em;
    margin-bottom: 10px;
    font-family: sans-serif;
}

.main-jp {
    font-size: 48px;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: 0.05em;
    margin: 0;
}

.description {
	width:800px;
	position:relative;
}
/* 本文テキスト */
.description p {
    font-size: 16px;
    line-height: 2; /* 行間を広めに取って読みやすく */
    color: #555;
    margin-bottom: 30px;
    text-align: justify; /* 両端揃え */
}

/* --- 右側：画像エリア --- */
.business-image {
    width: 50%; /* 全体の50%の幅 */
}

.business-image img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 4px; /* 角を少しだけ丸く */
    box-shadow: 20px 20px 0px #f0f0f0; /* 右下にズレた影のような装飾 */
}

/* --- スマホ対応 (レスポンシブ) --- */
@media (max-width: 768px) {
    .bg-vertical-text {
        font-size: 60px;
        top: 0;
        left: 20px;
    }

    .business-content-wrapper {
        flex-direction: column; /* 縦並びにする */
        margin-top: 60px;
    }

    .business-text {
        width: 100%;
        padding-right: 0;
        margin-bottom: 50px;
    }

    .main-jp {
        font-size: 32px; /* スマホでは見出しを小さく */
    }

    .description p {
        font-size: 12px;
        text-align: left; /* スマホでは左揃えの方が自然 */
    }

    .business-image {
        width: 100%;
    }

    .business-image img {
        box-shadow: 10px 10px 0px #f0f0f0; /* 影も少し小さく */
    }
}


/* --- CTAボタンエリアの設定 --- */
.cta-group {
    margin-top: 40px; /* テキストとの間隔 */
    display: flex; /* 横並びにする */
    gap: 20px; /* ボタン同士の間隔 */
	width:600px;
	position:relative;
}

/* --- ボタン共通スタイル --- */
.btn {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    text-decoration: none;
    font-size: 16px;
    font-weight: 700;
    padding: 20px 45px;
    border-radius: 50px; /* 丸みのあるボタン */
    transition: all 0.3s ease; /* アニメーション */
    width: fit-content; /* 文字数に合わせる（固定幅なら width: 200px; 等） */
    position: relative;
    font-family: "Noto Sans JP", sans-serif;
}

/* 矢印アイコン */
.btn .arrow {
    margin-left: 10px;
    font-weight: 400;
    transition: transform 0.3s ease;
}

/* ホバー時に矢印が少し右に動く */
.btn:hover .arrow {
    transform: translateX(5px);
}

/* --- デザイン1：プライマリー（青塗りつぶし） --- */
.btn-primary {
    background-color: #0044CC; /* メインカラー */
    color: #fff;
    border: 2px solid #0044CC;
    box-shadow: 0 4px 10px rgba(0, 68, 204, 0.3); /* 青い影 */
}

.btn-primary:hover {
    background-color: #003399; /* 少し濃くする */
    border-color: #003399;
    box-shadow: 0 6px 15px rgba(0, 68, 204, 0.4);
    transform: translateY(-2px); /* 少し浮き上がる */
}

/* --- デザイン2：セカンダリー（枠線のみ） --- */
.btn-secondary {
    background-color: transparent;
    color: #0044CC;
    border: 2px solid #0044CC;
}

.btn-secondary:hover {
    background-color: #0044CC;
    color: #fff;
    transform: translateY(-2px); /* 少し浮き上がる */
}

/* --- スマホ対応（ボタン周り） --- */
@media (max-width: 768px) {
    .cta-group {
        flex-direction: column; /* スマホでは縦並びにする */
        gap: 15px;
        margin-top: 30px;
    }

    .btn {
        width: 100%; /* スマホでは幅いっぱいに広げる */
        box-sizing: border-box; /* パディングを含めて幅計算 */
    }
}









/* --- セクション共通 --- */
.job-section {
    padding: 100px 0;
    background-color: #fdfdfd; /* 背景を少しグレーにして前のセクションと区別 */
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* --- セクションタイトル --- */
.section-header-center {
    text-align: center;
    margin-bottom: 60px;
}

.header-en {
    display: block;
    color: #0044CC; /* ウイングブルー */
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.15em;
    margin-bottom: 10px;
    font-family: 'Oswald', sans-serif; /* 英語用フォント */
}

.header-jp {
    font-size: 36px;
    font-weight: 700;
    margin: 0;
    letter-spacing: 0.05em;
}

/* --- グリッドレイアウト --- */
/*.job-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3列 */
/*    gap: 30px; /* カード間の隙間 */
/*}
 * /
/* --- グリッドレイアウト（2職種用） --- */
.job-grid {
    display: grid;
    /* 2列にする設定 */
    grid-template-columns: repeat(2, 1fr); 
    gap: 40px; /* カード間の隙間を少し広めに */
    
    /* 2つだけの場合、横に広がりすぎないように幅を制限して中央寄せ */
    max-width: 900px;
    margin: 0 auto;
}

/* --- カードデザイン --- */
.job-card {
    background-color: #fff;
    text-decoration: none; /* リンクの下線を消す */
    color: #333;
    display: flex;
    flex-direction: column;
    box-shadow: 0 5px 20px rgba(0,0,0,0.05); /* うっすら影 */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    overflow: hidden; /* 画像拡大時のはみ出し防止 */
    position: relative;
}

/* ホバー時のカード全体の動き */
.job-card:hover {
    transform: translateY(-5px); /* 少し浮く */
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}

/* 画像エリア */
.job-img-box {
    width: 100%;
    aspect-ratio: 16 / 9; /* 横縦比を固定 */
    overflow: hidden;
    position: relative;
}

.job-img-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);
}

/* ホバーで画像拡大 */
.job-card:hover .job-img-box img {
    transform: scale(1.1);
}

/* 数字 (01, 02...) */
.job-num {
    position: absolute;
    top: 0;
    left: 0;
    background-color: #0044CC;
    color: #fff;
    font-family: 'Oswald', sans-serif;
    font-size: 20px;
    padding: 10px 20px;
    font-weight: 500;
    z-index: 1;
}

/* テキストエリア */
.job-txt-box {
    padding: 30px;
    display: flex;
    flex-direction: column;
    flex-grow: 1; /* 高さを揃えるため */
}

/* 職種タイトル */
.job-title {
    margin: 0 0 15px 0;
    border-bottom: 2px solid #eee;
    padding-bottom: 15px;
}

.title-en {
    display: block;
    font-size: 14px;
    color: #aaa;
    font-family: 'Oswald', sans-serif;
    letter-spacing: 0.05em;
    margin-bottom: 5px;
    transition: color 0.3s ease;
}

.title-jp {
    display: block;
    font-size: 20px;
    font-weight: 700;
    transition: color 0.3s ease;
}

/* ホバーでタイトルの色変更 */
.job-card:hover .title-jp {
    color: #0044CC;
}

/* 説明文 */
.job-desc {
    font-size: 14px;
    line-height: 1.8;
    color: #666;
    margin: 0 0 20px 0;
    flex-grow: 1; /* 下のリンクを底に押しやる */
}

/* VIEW MOREリンク */
.job-link {
    font-size: 12px;
    font-weight: 700;
    color: #333;
    display: flex;
    align-items: center;
    justify-content: flex-end; /* 右寄せ */
    letter-spacing: 0.1em;
}

.job-link .arrow {
    margin-left: 10px;
    color: #0044CC;
    transition: transform 0.3s ease;
}

/* ホバーで矢印が動く */
.job-card:hover .job-link .arrow {
    transform: translateX(5px);
}

/* --- レスポンシブ対応 (スマホ) --- */
@media (max-width: 768px) {
    /* スマホでは1列 */
    .job-grid {
        grid-template-columns: 1fr;
        gap: 40px;
        max-width: 100%; /* スマホでは幅制限を解除 */
    }

    .job-img-box {
        aspect-ratio: 3 / 2;
    }
}







/* --- 仕事紹介セクション --- */
.work-intro-section {
    padding: 120px 0;
    background-color: #fdfdfd;
    overflow: hidden; /* 背景の数字がはみ出しても大丈夫なように */
}

/* リスト全体の枠 */
.work-list {
    display: flex;
    flex-direction: column;
    gap: 100px; /* 項目同士の間隔を広くとる */
    margin-top: 60px;
}

/* 個々のアイテム（行） */
.work-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
}

/* --- 2つ目のアイテムを反転させる設定 --- */
.work-item.work-reverse {
    flex-direction: row-reverse; /* 左右逆にする */
}

/* --- 画像エリア --- */
.work-img {
    width: 55%; /* 画像を少し大きめに */
    position: relative;
    z-index: 1;
}

.work-img img {
    width: 100%;
    height: auto;
    display: block;
    box-shadow: 20px 20px 0px #f0f4ff; /* 青っぽい薄い影で装飾 */
    transition: transform 0.6s ease;
}

/* ホバーで画像が少しズームする演出 */
.work-item:hover .work-img img {
    transform: scale(1.02);
}

/* --- テキストエリア --- */
.work-content {
    width: 40%; /* テキスト幅 */
    position: relative;
    z-index: 2; /* 画像より手前にする可能性も考慮 */
}

/* 背景の巨大な数字 (01, 02) */
.bg-number {
    position: absolute;
    top: -80px;
    left: -20px;
    font-size: 150px;
    font-family: 'Oswald', sans-serif;
    font-weight: 700;
    color: #f2f2f2; /* ごく薄いグレー */
    line-height: 1;
    z-index: -1; /* 文字の後ろへ */
}

/* 反転時は数字の位置を調整 */
.work-reverse .bg-number {
    left: auto;
    right: -20px;
}

/* タイトル */
.work-title {
    margin-bottom: 30px;
    border-left: 5px solid #0044CC; /* 青いアクセントライン */
    padding-left: 20px;
}

.work-title-en {
    display: block;
    font-size: 14px;
    color: #0044CC;
    font-family: 'Oswald', sans-serif;
    letter-spacing: 0.1em;
    margin-bottom: 5px;
}

.work-title-jp {
    display: block;
    font-size: 28px;
    font-weight: 700;
    line-height: 1.4;
}

/* 説明文 */
.work-desc {
    font-size: 15px;
    line-height: 2;
    color: #666;
    margin-bottom: 30px;
    text-align: justify; /* 両端揃えできれいに見せる */
}

/* リンクボタン (READ MORE) */
.btn-arrow-link {
    text-decoration: none;
    font-size: 14px;
    font-weight: 700;
    color: #333;
    display: inline-flex;
    align-items: center;
    border-bottom: 2px solid #333; /* 下線デザイン */
    padding-bottom: 5px;
    transition: all 0.3s ease;
    font-family: 'Oswald', sans-serif;
    letter-spacing: 0.05em;
}

.btn-arrow-link .arrow {
    margin-left: 10px;
    transition: transform 0.3s ease;
}

/* ホバー時の動き */
.btn-arrow-link:hover {
    color: #0044CC;
    border-color: #0044CC;
}

.btn-arrow-link:hover .arrow {
    transform: translateX(5px);
}


/* --- スマホ対応 (レスポンシブ) --- */
@media (max-width: 900px) {
    .work-item, 
    .work-item.work-reverse {
        flex-direction: column; /* 常に縦並び */
        gap: 30px;
    }

    .work-img, 
    .work-content {
        width: 100%;
    }

    .work-img img {
        box-shadow: 10px 10px 0px #f0f4ff; /* 影を小さく */
    }

    .bg-number {
        font-size: 100px;
        top: -40px;
        left: 0;
    }

    /* スマホでは文章と画像の間を少し空ける */
    .work-content {
        padding-top: 20px;
    }
}








/* --- 社員の声セクション --- */
.interview-section {
    padding: 100px 0;
    background-color: #fdfdfd; /* 背景色（薄いグレー） */
}

/* グリッドレイアウト */
/* --- グリッドレイアウト（2名用修正） --- */
.interview-grid {
    display: grid;
    /* 2列に変更 */
    grid-template-columns: repeat(2, 1fr); 
    /* カード間の隙間を調整 */
    gap: 60px; 
    
    /* 2枚だけなので横幅を制限して中央に寄せる */
    max-width: 800px;
    margin: 0 auto 60px auto;
}

/* カード全体 */
.interview-card {
    text-decoration: none;
    color: #333;
    display: flex;
    flex-direction: column;
    group: interview-group; /* ホバー制御用 */
}

/* --- 画像エリア --- */
.interview-img-box {
    width: 100%;
    aspect-ratio: 3 / 4; /* 縦長の比率 (人物がきれいに見える) */
    overflow: hidden;
    position: relative;
    margin-bottom: 25px;
    box-shadow: 0 10px 20px rgba(0,0,0,0.05);
}

.interview-img-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);
}

/* ホバーで画像拡大 */
.interview-card:hover .interview-img-box img {
    transform: scale(1.08);
}

/* 写真上のタグ (職種など) */
.interview-tag {
    position: absolute;
    top: 20px;
    left: 0;
    background-color: #0044CC; /* ウイングブルー */
    color: #fff;
    font-size: 12px;
    font-family: 'Oswald', sans-serif;
    font-weight: 500;
    padding: 8px 15px;
    letter-spacing: 0.05em;
    z-index: 2;
}

/* --- テキストエリア --- */
.interview-content {
    padding-right: 10px;
}

/* キャッチコピー */
.interview-catch {
    font-size: 18px;
    font-weight: 700;
    line-height: 1.6;
    margin: 0 0 15px 0;
    transition: color 0.3s ease;
    /* 文字詰め設定 */
    font-feature-settings: "palt";
}

.interview-card:hover .interview-catch {
    color: #0044CC; /* ホバーで青く */
}

/* 名前・年次 */
.interview-name {
    font-size: 13px;
    color: #666;
    margin: 0 0 20px 0;
    border-top: 1px solid #ddd; /* 上に細い線 */
    padding-top: 15px;
    display: inline-block;
    width: 100%;
}

/* リンク矢印 */
.interview-link {
    font-size: 12px;
    font-weight: 700;
    color: #333;
    font-family: 'Oswald', sans-serif;
    letter-spacing: 0.1em;
    display: flex;
    align-items: center;
}

.interview-link .arrow {
    margin-left: 10px;
    color: #0044CC;
    transition: transform 0.3s ease;
}

.interview-card:hover .interview-link .arrow {
    transform: translateX(5px);
}

/* --- ボタンエリア（中央寄せ） --- */
.btn-area-center {
    text-align: center;
    margin-top: 40px;
}

.btn-wide {
    padding-left: 50px;
    padding-right: 50px;
}


/* --- スマホ対応 (レスポンシブ) --- */
@media (max-width: 768px) {
    .interview-grid {
        grid-template-columns: 1fr;
        gap: 50px;
        max-width: 100%; /* スマホでは幅制限解除 */
    }

    .interview-img-box {
        aspect-ratio: 4 / 3; /* スマホでは横長気味の方が見やすい場合があるが、お好みで */
        /* もしスマホでも縦長が良ければ aspect-ratio: 3 / 4; のままでOK */
    }

    .interview-catch {
        font-size: 16px;
    }
}


/* --- 採用情報セクション --- */
.recruit-info-section {
    position: relative;
    background-color: #fdfdfd;
    overflow: hidden;
}

/* 背景の巨大文字 (RECRUIT) */
.bg-recruit-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* 中央配置 */
    font-size: 25vw; /* 画面幅に応じた巨大サイズ */
    font-family: 'Oswald', sans-serif;
    font-weight: 700;
    color: #f7f7f7; /* ほぼ白に近いグレー */
    z-index: 0; /* 一番奥 */
    pointer-events: none; /* 選択不可 */
    line-height: 1;
    white-space: nowrap;
}

/* コンテナは背景より手前に */
.recruit-info-section .container {
    position: relative;
    z-index: 1;
}

/* --- リンクカードグリッド --- */
.recruit-link-grid {
    display: grid;
    grid-template-columns: 1fr 1fr; /* 2列 */
    gap: 30px;
    max-width: 1000px;
    margin: 0 auto 60px auto;
}

/* カード本体 */
.recruit-link-card {
    display: block;
    background-color: #fff;
    border: 1px solid #ddd;
    text-decoration: none;
    color: #333;
    padding: 50px 40px;
    transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1);
    position: relative;
}

/* ホバー時の反転アクション */
.recruit-link-card:hover {
    background-color: #0044CC; /* ウイングブルー */
    border-color: #0044CC;
    color: #fff; /* 文字を白く */
    transform: translateY(-5px); /* 少し浮く */
    box-shadow: 0 15px 30px rgba(0, 68, 204, 0.2);
}

/* カード内の要素 */
.card-inner {
    text-align: center;
}

.cat-en {
    display: block;
    font-family: 'Oswald', sans-serif;
    font-size: 14px;
    letter-spacing: 0.1em;
    margin-bottom: 10px;
    opacity: 0.6;
    transition: opacity 0.3s;
}

.recruit-link-card:hover .cat-en {
    opacity: 0.9; /* 白文字になったときは少し濃く */
}

.cat-jp {
    font-size: 24px;
    font-weight: 700;
    margin: 0 0 20px 0;
}

.cat-desc {
    font-size: 14px;
    line-height: 1.8;
    margin-bottom: 30px;
    opacity: 0.8;
}

/* 矢印アイコン */
.card-arrow {
    display: inline-block;
    font-size: 20px;
    font-family: 'Oswald', sans-serif;
    transition: transform 0.3s;
}

.recruit-link-card:hover .card-arrow {
    transform: translateX(10px); /* 右へ動く */
}

/* --- エントリーエリア --- */
.entry-cta-area {
    text-align: center;
    margin-top: 80px;
}

.entry-msg {
    font-size: 16px;
    margin-bottom: 20px;
    font-weight: 700;
}

/* 大きなエントリーボタン */
.big-entry-btn {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    text-decoration: none;
    background-color: #333; /* 黒に近いグレー */
    color: #fff;
    font-family: 'Oswald', sans-serif;
    font-size: 24px;
    font-weight: 700;
    letter-spacing: 0.1em;
    padding: 20px 80px;
    border-radius: 50px;
    transition: all 0.3s ease;
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}

.big-entry-btn .btn-arrow {
    margin-left: 15px;
    transition: transform 0.3s;
}

/* エントリーボタンのホバー */
.big-entry-btn:hover {
    background-color: #0044CC; /* 青に変化 */
    transform: scale(1.05); /* 少し大きく */
    box-shadow: 0 10px 25px rgba(0, 68, 204, 0.3);
}

.big-entry-btn:hover .btn-arrow {
    transform: translateX(5px);
}


/* --- スマホ対応 (レスポンシブ) --- */
@media (max-width: 768px) {
    .bg-recruit-text {
        font-size: 80px; /* スマホではサイズを調整 */
    }

    .recruit-link-grid {
        grid-template-columns: 1fr; /* 1列 */
        gap: 20px;
    }

    .recruit-link-card {
        padding: 30px 20px;
    }

    .cat-jp {
        font-size: 20px;
    }

    .big-entry-btn {
        width: 80%; /* 幅を広めに */
        padding: 15px 0;
        font-size: 20px;
    }
}




/* --- 数字・環境リンク セクション --- */
.culture-links-section {
    width: 100%;
    /* 背景色（隙間が見えた時用） */
    background-color:#fdfdfd; 
}

/* フレックスボックスで横並び */
.culture-container {
    display: flex;
    width: 100%;
    height: 400px; /* カードの高さを固定 */
}

/* カード共通設定 */
.culture-card {
    position: relative;
    width: 50%; /* 画面の半分 */
    height: 100%;
    display: block;
    text-decoration: none;
    overflow: hidden; /* 画像拡大時のはみ出し防止 */
    color: #fff;
    background-color: #000; /* 画像読み込み前の背景 */
}

/* --- 背景画像エリア --- */
.culture-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.culture-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* 画像をトリミングして埋める */
    opacity: 0.7; /* 少し暗くして文字を見やすく */
    transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.3s ease;
}

/* ホバー時の画像変化 */
.culture-card:hover .culture-bg img {
    transform: scale(1.1); /* 拡大 */
    opacity: 0.4; /* さらに暗く（または青く）して文字を強調 */
}

/* ホバー時に青いオーバーレイをかけるならこちらを追加 */
.culture-card::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 68, 204, 0.8); /* ウイングブルーの透過 */
    z-index: 2;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

.culture-card:hover::after {
    opacity: 1; /* ホバーで青フィルターを表示 */
}


/* --- テキストコンテンツ --- */
.culture-content {
    position: relative;
    z-index: 3; /* 画像やオーバーレイより手前 */
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
}

/* 英語タイトル */
.culture-en {
    font-family: 'Oswald', sans-serif;
    font-size: 16px;
    letter-spacing: 0.2em;
    margin-bottom: 10px;
    opacity: 0.8;
    transform: translateY(20px);
    transition: transform 0.4s ease;
}

/* 日本語タイトル */
.culture-jp {
    font-family: "Noto Sans JP", sans-serif;
    font-size: 32px;
    font-weight: 700;
    letter-spacing: 0.05em;
    margin: 0;
    transform: translateY(20px);
    transition: transform 0.4s ease;
}

/* 矢印 */
.culture-arrow {
    margin-top: 20px;
    font-size: 24px;
    font-family: 'Oswald', sans-serif;
    opacity: 0; /* 最初は隠しておく */
    transform: translateY(20px);
    transition: all 0.4s ease;
}

/* --- ホバー時のテキストアニメーション --- */
.culture-card:hover .culture-en,
.culture-card:hover .culture-jp {
    transform: translateY(0); /* 元の位置へふわっと浮き上がる */
}

.culture-card:hover .culture-arrow {
    opacity: 1;
    transform: translateY(0);
}


/* --- スマホ対応 (レスポンシブ) --- */
@media (max-width: 768px) {
    .culture-container {
        flex-direction: column; /* 縦並び */
        height: auto;
    }

    .culture-card {
        width: 100%;
        height: 250px; /* スマホでの高さ */
    }

    .culture-jp {
        font-size: 24px;
    }
    
    /* スマホでは最初から文字位置を固定（アニメなし）でもOK */
    .culture-en, .culture-jp, .culture-arrow {
        transform: translateY(0);
        opacity: 1;
    }
    
    .culture-card::after {
        display: none; /* スマホでは青フィルターをなしにして写真を見せるなど調整可 */
    }
}

/* --- セクションヘッダー --- */
.numbers-section {
    padding: 100px 0;
}

.section-header-center {
    text-align: center;
    margin-bottom: 60px;
}

.header-en {
    display: block;
    color: #0044CC;
    font-size: 14px;
    font-family: 'Oswald', sans-serif;
    letter-spacing: 0.1em;
    font-weight: 700;
    margin-bottom: 10px;
}

.header-jp {
    font-size: 36px;
    font-weight: 700;
    margin: 0 0 20px 0;
}

.header-desc {
    font-size: 15px;
    line-height: 1.8;
    color: #666;
}

/* --- グリッドレイアウト --- */
.numbers-grid {
    display: grid;
    /* PCでは3列、幅が狭くなると自動で減る */
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
	width:98%;
	margin-left:auto;
	margin-right:auto;
}

/* --- カードデザイン --- */
.stat-card {
    background-color: #fff;
    padding: 40px 30px;
    border-radius: 8px;
    text-align: center;
    box-shadow: 0 5px 20px rgba(0,0,0,0.05);
    border-bottom: 4px solid transparent; /* 下線のアニメーション用 */
    transition: transform 0.3s ease, border-color 0.3s ease;
}

.stat-card:hover {
    transform: translateY(-5px);
    border-bottom-color: #0044CC; /* ホバーで青い線が出る */
}

/* アイコン */
.stat-icon {
    font-size: 40px;
    margin-bottom: 15px;
}

/* ラベル */
.stat-label {
    font-size: 18px;
    font-weight: 700;
    color: #555;
    margin: 0 0 20px 0;
}

/* 数字エリア */
.stat-data {
    display: flex;
    align-items: baseline;
    justify-content: center;
    line-height: 1;
    color: #0044CC;
    margin-bottom: 10px;
}

/* カウントアップする数字 */
.counter {
    font-family: 'Oswald', sans-serif;
    font-size: 64px;
    font-weight: 700;
}

/* 単位 */
.unit {
    font-size: 24px;
    font-weight: 700;
    margin-left: 5px;
    color: #333;
}

/* 補足テキスト */
.stat-note {
    font-size: 13px;
    color: #888;
    margin: 0;
}

/* --- グラフバー（装飾） --- */
.progress-bar {
    width: 100%;
    height: 10px;
    background-color: #eee;
    border-radius: 5px;
    margin-top: 15px;
    overflow: hidden;
}

.progress-fill {
    height: 100%;
    background-color: #0044CC;
    border-radius: 5px;
}

/* --- 文理比率などの特殊レイアウト --- */
.stat-text-row {
    display: flex;
    justify-content: center;
    align-items: baseline;
    gap: 20px;
    margin-bottom: 15px;
}

.ratio-box {
    text-align: center;
}

.ratio-label {
    display: block;
    font-size: 12px;
    color: #666;
    margin-bottom: 5px;
}

.ratio-num {
    font-family: 'Oswald', sans-serif;
    font-size: 32px;
    font-weight: 700;
    color: #333;
}

.ratio-sep {
    font-size: 24px;
    color: #ccc;
}

.ratio-bar {
    display: flex;
    width: 100%;
    height: 10px;
    border-radius: 5px;
    overflow: hidden;
}

.ratio-fill-left {
    background-color: #0044CC; /* 文系色 */
}
.ratio-fill-right {
    background-color: #66aaff; /* 理系色（薄い青） */
}

/* --- レスポンシブ --- */
@media (max-width: 768px) {
    .header-jp {
        font-size: 28px;
    }
    .counter {
        font-size: 50px;
    }
	.header-desc {
    font-size: 12px;
}
}







/* --- セクションヘッダー --- */
.numbers-section {
    padding: 100px 0;
}

.section-header-center {
    text-align: center;
    margin-bottom: 60px;
}

.header-en {
    display: block;
    color: #0044CC;
    font-size: 14px;
    font-family: 'Oswald', sans-serif;
    letter-spacing: 0.1em;
    font-weight: 700;
    margin-bottom: 10px;
}

.header-jp {
    font-size: 36px;
    font-weight: 700;
    margin: 0 0 20px 0;
}

.header-desc {
    font-size: 15px;
    line-height: 1.8;
    color: #666;
}

//* --- 前回のCSSに追加・上書きしてください --- */

/* グリッド: 項目数が多いので、PCでは4列になっても良いように調整 */
.numbers-grid {
    display: grid;
    /* 幅が狭まると自動で折り返し、PCなら最大4列まで並ぶ設定 */
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 30px;
    margin-bottom: 60px;
}

/* 単位の前につく文字 (Sinceなど) */
.unit-prefix {
    font-size: 16px;
    font-weight: 700;
    margin-right: 5px;
    color: #888;
}

/* グラフ周りの調整 */
.mt-10 {
    margin-top: 15px;
}

.ratio-bar {
    display: flex;
    width: 100%;
    height: 12px;
    border-radius: 6px;
    overflow: hidden;
    background-color: #eee;
}

/* 性別グラフの色 */
.ratio-fill-male { background-color: #0044CC; }   /* 青 */
.ratio-fill-female { background-color: #FF6699; } /* ピンク */

/* 年齢層グラフの色（同系色の濃淡で表現） */
.ratio-fill-1 { background-color: #89CFF0; } /* 薄い青 */
.ratio-fill-2 { background-color: #0044CC; } /* メイン青 */
.ratio-fill-3 { background-color: #002266; } /* 濃い青 */

/* グラフの凡例 */
.chart-legend {
    display: flex;
    justify-content: center;
    gap: 15px;
    font-size: 12px;
    color: #666;
    margin-top: 10px;
}

.dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    margin-right: 5px;
}
.c1 { background-color: #89CFF0; }
.c2 { background-color: #0044CC; }
.c3 { background-color: #002266; }

/* 育休復帰率などを強調する場合 */
.highlight-card {
    border: 2px solid #0044CC;
    background-color: #f0f8ff;
}

.stat-text-sm {
    font-size: 14px;
    font-weight: 700;
    color: #333;
    margin-bottom: 5px;
}







/* --- 過去3年実績（横長カード）用の設定 --- */

/* グリッドで2列分またぐ設定 (PC時) */
@media (min-width: 768px) {
    .wide-card {
        grid-column: span 2; /* 2列分の幅を使う */
    }
	.unit-prefix {
    margin-right: 0px;
 
}
}

.recruit-history-container {
    text-align: left;
    margin-top: 20px;
}

.history-year-row {
    display: flex;
    align-items: center;
    border-bottom: 1px solid #eee;
    padding: 15px 0;
}

.history-year-row:last-child {
    border-bottom: none;
}

/* 年度のラベル */
.year-label {
    width: 80px;
    font-weight: 700;
    font-size: 16px;
    color: #0044CC;
    flex-shrink: 0; /* 幅を固定 */
}

/* データエリア */
.year-data {
    flex-grow: 1;
    display: flex;
    gap: 20px; /* 新卒中途と文理の間隔 */
}

.data-group {
    width: 50%; /* 半分ずつ使う */
}

/* テキスト部分 */
.data-text {
    font-size: 13px;
    margin-bottom: 5px;
    display: flex;
    align-items: baseline;
    justify-content: space-between; /* 左右に広げる */
}

.d-label {
    color: #666;
    font-size: 11px;
}

.d-num {
    font-weight: 700;
    font-family: 'Oswald', sans-serif;
    font-size: 16px;
    margin-left: 3px;
}

.sep {
    color: #ccc;
    margin: 0 5px;
}

/* グラフバーの高さ調整 */
.small-bar {
    height: 8px; /* 少し細くしてスッキリさせる */
}

/* --- グラフの色定義 --- */
/* 新卒・中途 */
.fill-new { background-color: #0044CC; } /* 青 */
.fill-mid { background-color: #333333; } /* 黒グレー */

/* 文系・理系 (少し色味を変えて区別) */
.fill-bun { background-color: #FF9900; } /* オレンジ */
.fill-ri  { background-color: #0099CC; } /* 水色 */

/* 凡例用のドット色 */
.c-new { background-color: #0044CC; }
.c-mid { background-color: #333333; }
.c-bun { background-color: #FF9900; }
.c-ri  { background-color: #0099CC; }

.mt-20 { margin-top: 20px; }
.spacer { margin: 0 10px; border-left: 1px solid #ddd; }


/* --- スマホ対応 --- */
@media (max-width: 768px) {
    /* スマホでは2列またぎを解除 */
    .wide-card {
        grid-column: span 1;
    }

    .history-year-row {
        flex-direction: column; /* 縦並び */
        align-items: flex-start;
    }

    .year-label {
        margin-bottom: 10px;
        font-size: 18px;
    }

    .year-data {
        width: 100%;
        flex-direction: column; /* データも縦並び */
        gap: 15px;
    }

    .data-group {
        width: 100%;
    }
}

/* --- 過去3年実績（カラムレイアウト版） --- */

@media (min-width: 768px) {
    .wide-card {
        grid-column: span 2; /* PCでは2列分使う */
    }
}

.recruit-matrix-container {
    display: flex;
    justify-content: space-between;
    margin-top: 20px;
    border-top: 1px solid #eee;
}

/* 1年分のカラム */
.matrix-col {
    flex: 1; /* 等分 */
    padding: 20px 10px;
    border-right: 1px solid #eee; /* 縦線で区切る */
    text-align: center;
}

.matrix-col:last-child {
    border-right: none;
}

/* 最新年度などの強調（背景色をつける） */
.matrix-col.highlight-col {
    background-color: #f9fbff; /* ほんのり青 */
}

/* 年度の見出し */
.matrix-header {
    font-weight: 700;
    color: #666;
    margin-bottom: 15px;
    display: inline-block;
    border-bottom: 2px solid #0044CC;
    padding-bottom: 2px;
}

/* 合計人数エリア */
.matrix-total {
    margin-bottom: 20px;
}

.total-label {
    display: block;
    font-size: 11px;
    color: #999;
    font-family: 'Oswald', sans-serif;
    letter-spacing: 1px;
}

.total-num {
    font-family: 'Oswald', sans-serif;
    font-size: 36px;
    font-weight: 700;
    color: #333;
    line-height: 1;
}

.total-unit {
    font-size: 14px;
    font-weight: 700;
}

/* 区切り線 */
.matrix-divider {
    height: 1px;
    background-color: #eee;
    margin: 15px 20px;
}

/* 内訳の行 */
.matrix-row {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-bottom: 8px;
}

/* タグと数字のセット */
.tag-group {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 45%;
}

/* タグ（バッジ）のデザイン */
.tag {
    font-size: 10px;
    color: #fff;
    padding: 2px 8px;
    border-radius: 10px;
    margin-bottom: 2px;
    width: 100%;
    box-sizing: border-box;
}

/* 各タグの色 */
.tag-new { background-color: #0044CC; } /* 新卒：青 */
.tag-mid { background-color: #555555; } /* 中途：グレー */
.tag-bun { background-color: #FF9900; } /* 文系：オレンジ */
.tag-ri  { background-color: #0099CC; } /* 理系：水色 */

/* 内訳の数字 */
.tag-val {
    font-family: 'Oswald', sans-serif;
    font-weight: 700;
    font-size: 18px;
    color: #333;
}


/* --- スマホ対応 --- */
@media (max-width: 768px) {
    /* 縦並びにするかは情報量によるが、
       横スクロールで見せるか、縦に積むか。
       ここでは「縦に積む」パターンにします */
       
    .recruit-matrix-container {
        flex-direction: column;
        border-top: none;
    }

    .matrix-col {
        border-right: none;
        border-bottom: 1px solid #eee;
        padding: 20px 0;
        display: flex; /* 横並びレイアウトに変更 */
        align-items: center;
        justify-content: space-between;
        text-align: left;
    }

    .matrix-col:last-child {
        border-bottom: none;
    }

    .matrix-header {
        margin-bottom: 0;
        border-bottom: none;
        font-size: 16px;
        width: 80px; /* 年度の幅固定 */
    }

    .matrix-total {
        margin-bottom: 0;
        text-align: center;
        width: 60px;
    }
    .total-num { font-size: 24px; }

    .matrix-divider { display: none; } /* スマホでは区切り線不要 */

    /* 内訳エリアを右側にまとめる */
    .matrix-row {
        flex-direction: row;
        width: auto;
        gap: 15px;
        margin-bottom: 0;
    }
    
    .tag-group {
        width: auto;
        align-items: flex-start;
    }
    
    .tag {
        width: auto;
        margin-bottom: 0;
        margin-right: 5px;
        display: inline-block;
    }
    
    .tag-val {
        font-size: 14px;
        display: inline-block;
    }
    
    /* スマホ用にレイアウト調整：
       年度 | 合計 | 新卒N 中途N | 文系N 理系N 
       のように並べるのは狭いので、少し構造を変えます */
    
    .matrix-col {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }
    
    .matrix-header { grid-column: 1 / -1; border-bottom: 1px solid #eee; width: 100%; margin-bottom: 10px;}
    .matrix-total { grid-row: 2; grid-column: 1; text-align: left; }
    
    /* 詳細データを右側に寄せる */
    .matrix-row {
        justify-content: flex-start;
    }
}

/* --- 資格リストのデザイン --- */
.cert-list {
    margin: 15px 0;
    text-align: left;
    background-color: #f9f9f9;
    padding: 10px 15px;
    border-radius: 6px;
}

.cert-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px dashed #ddd;
    padding: 8px 0;
    font-size: 13px;
}

.cert-item:last-child {
    border-bottom: none;
}

.cert-name {
    color: #555;
    font-weight: 700;
}

.cert-val {
    font-family: 'Oswald', sans-serif;
    font-weight: 700;
    color: #0044CC;
    font-size: 16px;
}


.welfarep_title{text-align:center; font-size:60px; font-weight:600; color:black;}
.welfare_ul{display: flex; flex-wrap: wrap; width: 85%;height: 235px; margin-left: auto; margin-right: auto;}
.welfare_li{display:table; flex-wrap: wrap; width:25%;height: 300px; margin-left: auto; margin-right: auto;border-radius:10px; text-align:center;}
.welfare_ul1{display: flex; flex-wrap: wrap; width: 85%;height: 235px; margin-left: auto; margin-right: auto;}
.welfare_txt{font-size:22px; font-weight:700; padding:15px 0px;}
.welfare_img{width:45%; margin-left:auto;margin-right:auto;display:block;}
.welfare_sbtxt{font-size:18px;}
.welfare_div{display: table; flex-wrap: wrap; width: 90%; margin-left: auto; margin-right: auto; background-color:#ffff;border-radius:10px; text-align:center; margin-bottom:150px;	padding-bottom: 70px;}
.welfare_li_n{display:table; flex-wrap: wrap; width:25%;height: 300px; margin-left: auto; margin-right: auto;border-radius:10px; text-align:center;}
@media screen and (max-width: 767px) {
	.welfarep_title{font-size:30px;}
	.titlebox{margin-left: 25px; border-left: 10px solid #6a5acd;height:30px;}
	.contentstitle{font-size:22px;}
	.l-header {position: fixed;}
	.l-main{width:100%;}
	.welfare_div{ margin-bottom:50px;	padding-bottom: 0px;}
	.welfare_li{width:45%;height:165px;margin:4px;}
	.welfare_txt{font-size:15px;}
	.welfare_sbtxt{font-size:12px;}
	.welfare_ul{height: 360px; width:98%;margin-left:0;}
	.welfare_ul1{height: 180px; width:98%;margin-left:0;}
	.welfare_li_n{display:none;}
}

/* --- 数字セクション (ダイジェスト) --- */
.numbers-digest-section {
    padding: 100px 0;
    background-color: #fdfdfd /* 薄いグレー背景 */
}

/* 数字用の4列グリッド */
.digest-grid-numbers {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* 4列 */
    gap: 30px;
    margin-bottom: 50px;
}


/* --- 福利厚生セクション (ダイジェスト) --- */
.welfare-digest-section {
    padding: 100px 0;
    background-color: #fff; /* 白背景 */
}

/* 福利厚生用の4列グリッド */
.digest-grid-welfare {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* 4列 */
    gap: 30px;
    margin-bottom: 50px;
}


/* --- 共通カード設定（高さ揃えなど） --- */
.stat-card, 
.welfare-card {
    height: 100%; /* 高さを揃える */
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: center; /* 内容を中央寄せ */
    
    /* 基本デザイン */
    background-color: #fff;
    border-radius: 8px;
    padding: 30px 20px;
    text-align: center;
    box-shadow: 0 5px 20px rgba(0,0,0,0.05);
    transition: all 0.3s ease;
    border: 1px solid transparent;
}

.welfare-icon{
	height:80px;
}

/* 福利厚生カードの微調整（数字カードより背景を区別する場合） */
.welfare-digest-section .welfare-card {
    background-color: #fdfdfd; /* 白背景の上に乗るカードなので少しグレーに */
}

/* ホバーアクション */
.stat-card:hover,
.welfare-card:hover {
    transform: translateY(-5px);
    border-color: #0044CC; /* 枠線を青く */
    box-shadow: 0 10px 25px rgba(0, 68, 204, 0.15);
    background-color: #fff;
}


/* --- スマホ対応 (レスポンシブ) --- */
@media (max-width: 900px) {
    /* タブレット: 2列×2行にする */
    .digest-grid-numbers,
    .digest-grid-welfare {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }
}

@media (max-width: 480px) {
    /* スマホ: 2列のまま維持（1列にすると長くなりすぎるため） */
    .digest-grid-numbers,
    .digest-grid-welfare {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }
    
    /* スマホでのカード内余白調整 */
    .stat-card, .welfare-card {
        padding: 20px 10px;
    }
    
    /* 文字サイズ調整 */
    .stat-label { font-size: 13px; margin-bottom: 10px; }
    .counter { font-size: 32px; }
    .unit { font-size: 14px; }
    
    .welfare-title { font-size: 14px; margin-bottom: 5px; }
    .welfare-text { font-size: 11px; line-height: 1.4; }
    .welfare-icon { font-size: 30px; margin-bottom: 10px; }
}



/* --- 既存のカード内ボタンの調整 --- */
.interview-link {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    /* 既存のフォント設定を継承 */
    font-size: 12px;
    font-weight: 700;
    color: #333;
    font-family: 'Oswald', sans-serif;
    letter-spacing: 0.1em;
    display: flex;
    align-items: center;
}
/* ホバー効果は既存のCSSが適用されます */


/* --- モーダル（ポップアップ）のスタイル --- */

/* 背景の黒い膜 */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

/* 表示時のクラス */
.modal-overlay.active {
    opacity: 1;
    visibility: visible;
}

/* 白いウィンドウ部分 */
.modal-window {
    background-color: #fff;
    width: 95%;
    max-width: 600px;
    max-height: 80vh; /* 画面からはみ出さない */
    border-radius: 8px;
    position: relative;
    box-shadow: 0 10px 40px rgba(0,0,0,0.3);
    transform: translateY(20px);
    transition: transform 0.3s ease;
    display: flex;
    flex-direction: column;
}

.modal-overlay.active .modal-window {
    transform: translateY(0);
}

/* 閉じるボタン */
.modal-close {
    position: absolute;
    top: 15px;
    right: 15px;
    background: none;
    border: none;
    font-size: 32px;
    line-height: 1;
    color: #999;
    cursor: pointer;
    z-index: 10;
}

.modal-close:hover {
    color: #333;
}

/* スクロール領域 */
.modal-scroll-content {
    overflow-y: auto;
    padding: 40px;
}

/* モーダル内のヘッダー */
.modal-header {
    border-bottom: 2px solid #0044CC;
    margin-bottom: 30px;
    padding-bottom: 15px;
}

.modal-role {
    display: block;
    font-size: 12px;
    color: #666;
    margin-bottom: 5px;
}

.modal-name {
    font-size: 28px;
    font-weight: 700;
    margin: 0;
}

/* Q&Aエリア */
.qa-item {
    margin-bottom: 30px;
}

.qa-item:last-child {
    margin-bottom: 0;
}

.qa-question {
    font-size: 16px;
    font-weight: 700;
    color: #0044CC; /* ウイングブルー */
    margin: 0 0 10px 0;
    display: flex;
    align-items: center;
}

/* Qアイコン装飾 */
.qa-question::before {
    content: "Q.";
    font-family: 'Oswald', sans-serif;
    margin-right: 8px;
    font-size: 20px;
}

.qa-answer {
    font-size: 14px;
    line-height: 1.8;
    color: #333;
    margin: 0;
    padding-left: 28px; /* Qの文字分インデント */
}

/* --- スマホ対応 --- */
@media (max-width: 768px) {
    .modal-scroll-content {
        padding: 30px 20px;
    }
    .modal-name {
        font-size: 24px;
    }
    .qa-answer {
        padding-left: 0; /* スマホではインデント解除 */
    }
}

/* --- カード全体をクリック可能にする設定 --- */
.interview-card {
    /* 既存のスタイルはそのまま維持 */
    cursor: pointer; /* マウスを乗せると指マークにする */
    position: relative; /* 念のため */
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* 動きをスムーズに */
}

/* ホバー時の挙動（既存のものに追加） */
.interview-card:hover {
    transform: translateY(-5px); /* 少し浮く */
    box-shadow: 0 10px 20px rgba(0,0,0,0.1); /* 影をつける */
}


/* --- VIEW MORE部分のスタイル調整 --- */
/* buttonタグからdivタグに変わったため、リセットCSSの一部は不要になりますが、
   見た目を維持するためのスタイルを再定義します */

.interview-link {
    /* ボタンらしい見た目を維持 */
    font-size: 12px;
    font-weight: 700;
    color: #333;
    font-family: 'Oswald', sans-serif;
    letter-spacing: 0.1em;
    display: flex;
    align-items: center;
    margin-top: 10px; /* 少し余白を開ける */
}

.interview-link .arrow {
    margin-left: 10px;
    color: #0044CC;
    transition: transform 0.3s ease;
}

/* カード全体をホバーした時に、VIEW MOREの矢印も動かす */
.interview-card:hover .interview-link .arrow {
    transform: translateX(5px);
}












/* --- 組織図エリア --- */
.org-chart-area {
    margin-bottom: 60px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.org-area-title {
    font-size: 16px;
    font-weight: 700;
    color: #0044CC; /* ウイングブルー */
    margin: 0 0 15px 0;
    text-align: center;
    border-bottom: 2px solid #eef4ff;
    padding-bottom: 10px;
}

/* --- 上段：事業フロー --- */
.org-business-flow {
    background-color: #fff;
    border: 1px solid #cce0ff; /* 青っぽい薄い枠線 */
    border-radius: 8px;
    padding: 30px;
    box-shadow: 0 5px 20px rgba(0, 68, 204, 0.05);
}

.business-process {
    display: flex;
    align-items: stretch;
    justify-content: center;
    gap: 20px;
}

.process-box {
    flex: 1;
    background-color: #f9fbff;
    border: 1px solid #e0ecff;
    border-radius: 8px;
    padding: 20px;
    position: relative;
    display: flex;
    flex-direction: column;
}

/* チームごとのカラーアクセント */
.dx-box { border-top: 4px solid #0044CC; }
.dev-box { border-top: 4px solid #002266; }

/* 顧客フェーズラベル */
.customer-phase {
    background-color: #002266;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 4px;
    display: inline-block;
    align-self: flex-start;
    margin-bottom: 15px;
}

.team-name {
    font-size: 20px;
    font-weight: 700;
    margin: 0 0 5px 0;
    color: #333;
}

.team-mission {
    font-size: 12px;
    color: #0044CC;
    font-weight: 700;
    margin-bottom: 15px;
}

.team-desc {
    font-size: 13px;
    line-height: 1.6;
    color: #666;
    margin: 0;
    margin-top: auto; /* 下に寄せる */
}

/* 役割タグ（募集職種との紐づけ） */
.role-tags {
    display: flex;
    gap: 10px;
    margin-bottom: 15px;
    flex-wrap: wrap;
}

.role-tag {
    font-size: 11px;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 4px;
    border: 1px solid #ccc;
}

.role-sales { color: #d35400; border-color: #f5c6cb; background-color: #fff5f5; }
.role-se { color: #0044CC; border-color: #b8daff; background-color: #f0f8ff; }


/* 中央の矢印 */
.process-arrow {
    display: flex;
    align-items: center;
    font-size: 30px;
    color: #ccc;
    font-weight: 700;
}


/* --- 下段：組織基盤 --- */
.org-foundation {
    background-color: #fff;
    border: 1px dashed #ccc; /* 支える側なので少し控えめに */
    border-radius: 8px;
    padding: 20px;
    text-align: center;
}

.foundation-grid {
    display: flex;
    justify-content: center;
    gap: 40px;
    flex-wrap: wrap;
}

.found-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 13px;
    color: #555;
    line-height: 1.4;
}

.found-item strong {
    color: #333;
    font-size: 14px;
    margin-bottom: 2px;
}

.found-icon {
    font-size: 24px;
    margin-bottom: 5px;
}


/* --- スマホ対応 (レスポンシブ) --- */
@media (max-width: 768px) {
    .business-process {
        flex-direction: column;
    }
    
    .process-arrow {
        transform: rotate(90deg); /* 下向きに */
        justify-content: center;
        margin: -10px 0;
    }

    .org-business-flow, .org-foundation {
        padding: 20px 15px;
    }

    .foundation-grid {
        flex-direction: column;
        gap: 20px;
    }
    
    .found-item {
        flex-direction: row;
        justify-content: center;
        gap: 10px;
        text-align: left;
    }
    
    .found-icon {
        margin-bottom: 0;
    }
}


/* --- チーム・仕事のつながりエリア --- */
.team-structure-area {
    margin-bottom: 60px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* --- 上段：エンジンの連携 --- */
.engine-wrapper {
    display: flex;
    justify-content: center;
    align-items: stretch;
    gap: 20px;
}

/* カード共通 */
.engine-card {
    flex: 1;
    background-color: #fff;
    border-radius: 12px; /* 丸く優しく */
    padding: 30px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.05);
    border: 2px solid transparent;
    transition: transform 0.3s ease;
    position: relative;
    overflow: hidden;
}

.engine-card:hover {
    transform: translateY(-5px);
}

/* タイプ別の色分け */
.type-create {
    border-color: #ffd699; /* オレンジ系（開拓） */
    background: linear-gradient(to bottom, #fffcf5, #fff);
}

.type-grow {
    border-color: #99ccff; /* 青系（成長・信頼） */
    background: linear-gradient(to bottom, #f0f8ff, #fff);
}

/* カードヘッダー */
.card-header {
    text-align: center;
    margin-bottom: 20px;
    border-bottom: 1px dashed #ccc;
    padding-bottom: 15px;
}

.card-header .icon {
    font-size: 40px;
    display: block;
    margin-bottom: 10px;
}

.card-title {
    font-size: 22px;
    font-weight: 700;
    margin: 0;
    color: #333;
}

.card-title small {
    font-size: 14px;
    color: #888;
}

.dept-name {
    display: inline-block;
    font-size: 11px;
    color: #666;
    background-color: rgba(255,255,255,0.8);
    padding: 2px 8px;
    border-radius: 4px;
    margin-top: 5px;
}

/* カードボディ */
.mission-text {
    font-size: 14px;
    line-height: 1.8;
    color: #555;
    margin-bottom: 20px;
    min-height: 80px; /* 高さ揃え */
}

.mission-text strong {
    display: block;
    color: #0044CC;
    font-size: 15px;
    margin-bottom: 5px;
}

/* 職種バッジ */
.active-roles {
    display: flex;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
}

.role-badge {
    font-size: 11px;
    font-weight: 700;
    padding: 5px 10px;
    border-radius: 20px;
    background-color: #fff;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

.role-sales { color: #d35400; border: 1px solid #ffd699; }
.role-se { color: #0044CC; border: 1px solid #99ccff; }


/* --- 中央の連携アイコン --- */
.connect-icon {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: #0044CC;
    font-weight: 700;
    font-size: 12px;
    font-family: 'Oswald', sans-serif;
    letter-spacing: 0.1em;
}

.arrow-shape {
    font-size: 30px;
    line-height: 1;
    margin-top: 5px;
}


/* --- 下段：土台バー --- */
.foundation-bar {
    background-color: #f4f4f4; /* 土台らしい落ち着いた色 */
    border-radius: 12px;
    padding: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 30px;
}

.foundation-header {
    display: flex;
    align-items: center;
    gap: 10px;
}

.foundation-header h3 {
    margin: 0;
    font-size: 16px;
    color: #333;
}

.foundation-content {
    display: flex;
    align-items: center;
    gap: 15px;
    font-size: 13px;
    color: #555;
}

.foundation-sep { color: #ccc; }


/* --- スマホ対応 (レスポンシブ) --- */
@media (max-width: 768px) {
    .engine-wrapper {
        flex-direction: column;
        gap: 30px;
    }
    
    .connect-icon {
        flex-direction: row;
        gap: 10px;
        transform: rotate(90deg); /* 矢印を縦に */
        margin: -10px 0;
    }
    
    .arrow-shape {
        transform: rotate(-90deg); /* 文字だけ戻すか、記号を変える */
    }

    .foundation-bar {
        flex-direction: column;
        gap: 15px;
        text-align: center;
    }
    
    .foundation-content {
        flex-direction: column;
        gap: 10px;
    }
    
    .foundation-sep { display: none; }
}











/* --- ダイジェストセクション全体 --- */
.welfare-digest-section {
    padding: 100px 0;
    background-color:#fdfdfd;
}

.digest-grid-welfare {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
    margin-bottom: 50px;
}

/* --- カード共通設定 --- */
.welfare-card {
    height: 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    
    /* 【重要修正】centerだと要素が重なる原因になるため、flex-start（上揃え）に変更 */
    justify-content: flex-start; 
    align-items: center; /* 横方向は中央 */

    background-color: #f9f9f9;
    border-radius: 12px; /* 少し丸みを強くして今っぽく */
    padding: 40px 25px; /* 余白を少し広げてゆったりさせる */
    text-align: center;
    box-shadow: 0 5px 15px rgba(0,0,0,0.03); /* 影を薄く上品に */
    transition: all 0.3s ease;
    border: 1px solid transparent;
}

/* --- アイコンエリアの修正（デザインブラッシュアップ） --- */
.welfare-icon {
    /* 固定枠を作ることでレイアウト崩れを防ぐ */
    width: 90px;
    height: 90px;
    margin-bottom: 25px; /* タイトルとの間隔を確保 */
    
    /* アイコンを丸い白背景に乗せて強調するデザイン */
    background-color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 10px rgba(0,0,0,0.05); /* アイコン自体にも少し影を */
}

/* 画像自体のサイズ制御（重なり防止の肝） */
.welfare_img {
    width: auto;
    height: auto;
    max-width: 60%;  /* 丸枠の中に収まるように調整 */
    max-height: 60%;
    object-fit: contain; /* アスペクト比を維持して収める */
}

/* --- テキスト周りの調整 --- */
.welfare-title {
    font-size: 18px; /* 少し大きく */
    font-weight: 700;
    color: #333;
    margin: 0 0 15px 0; /* 下に余白 */
    line-height: 1.4;
    font-feature-settings: "palt"; /* 文字詰め */
}

.welfare-text {
    font-size: 13px;
    line-height: 1.8; /* 行間を広げて読みやすく */
    color: #666;
    margin: 0;
    width: 100%;
}

/* --- ホバーアクション --- */
.welfare-card:hover {
    background-color: #fff;
    transform: translateY(-5px);
    border-color: #0044CC;
    box-shadow: 0 15px 30px rgba(0, 68, 204, 0.15);
}

/* ホバー時にアイコンも少し動かす */
.welfare-card:hover .welfare-icon {
    transform: scale(1.05);
    transition: transform 0.3s ease;
}


/* --- スマホ対応 (レスポンシブ) --- */
@media (max-width: 900px) {
    .digest-grid-welfare {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }
}

@media (max-width: 480px) {
    .digest-grid-welfare {
        grid-template-columns: repeat(2, 1fr); /* 2列維持 */
        gap: 12px;
    }
    
    .welfare-card {
        padding: 25px 15px; /* スマホでは余白を少し詰める */
    }
    
    /* スマホでのアイコンサイズ調整 */
    .welfare-icon {
        width: 70px;
        height: 70px;
        margin-bottom: 15px;
    }
    
    .welfare-title {
        font-size: 14px;
        margin-bottom: 10px;
    }

    .welfare-text {
        font-size: 11px;
        line-height: 1.5;
    }
}

/* ==============================================
   ヘッダーナビゲーション デザイン修正
   ============================================== */

/* --- ナビゲーションバー全体 (PC) --- */
.l-header__nav {
    background-color: #fff; /* 白背景で清潔感を出す */
    box-shadow: 0 2px 10px rgba(0,0,0,0.05); /* うっすら影をつけて浮かる */
    width: 100%;
    position: relative;
    z-index: 999;
}

.p-global-nav {
    display: flex;
    align-items: center;
    justify-content: flex-end; /* 右寄せ */
    height: 80px; /* ヘッダーの高さ */
    margin: 0 auto;
    width: 95%;
    max-width: 1400px;
}

/* --- 各メニュー項目 --- */
.p-global-nav > li {
    border: none !important; /* 既存の枠線を消す */
    margin: 0;
    padding: 0;
    list-style: none;
}

/* ロゴ部分の調整 */
.p-global-nav > li.nav-logo {
    margin-right: auto; /* ロゴだけ左に寄せる */
}
.p-global-nav > li.nav-logo img {
    height: 40px; /* ロゴサイズ調整 */
    width: auto;
    vertical-align: middle;
}

/* リンクのデザイン */
.p-global-nav > li > a {
    color: #333 !important; /* 文字は黒系 */
    font-weight: 700;
    font-size: 14px;
    padding: 0 20px;
    line-height: 80px;
    display: block;
    text-decoration: none;
    transition: color 0.3s;
    position: relative;
}

/* ホバー時の動き */
.p-global-nav > li > a:hover {
    color: #0044CC !important; /* ホバーで青く */
}


/* --- 「応募はこちら」ボタンのデザイン --- */
.p-global-nav > li.nav-item-cta {
    margin-left: 15px;
	color: #fff !important;
}

/* リンクタグ自体をボタンの形にする */
a.nav-btn-entry {
    line-height: 1 !important; /* 高さリセット */
    padding: 15px 30px !important;
    background-color: #0044CC; /* ウイングブルー */
    color: #fff !important;
    border-radius: 50px; /* 丸いボタン */
    font-weight: 700;
    font-size: 14px;
    transition: all 0.3s ease;
    box-shadow: 0 4px 10px rgba(0, 68, 204, 0.3);
    border: 2px solid #0044CC;
}

/* ボタンホバー時 */
a.nav-btn-entry:hover {
    background-color: #fff;
    color: #0044CC !important;
    transform: translateY(-2px);
}


/* --- ドロップダウンメニュー (PC) --- */
.sub-menu {
    background-color: #fff;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    border-top: 2px solid #0044CC;
    min-width: 200px;
    padding: 10px 0;
    display: none; /* 初期状態は非表示 */
    position: absolute;
    top: 80px;
    left: 0;
    z-index: 100;
}

.p-global-nav > li:hover .sub-menu {
    display: block; /* ホバーで表示 */
}

.sub-menu li a {
    padding: 15px 20px;
    color: #333 !important;
    font-size: 13px;
    display: block;
    border-bottom: 1px solid #eee;
}

.sub-menu li a:hover {
    background-color: #f9f9f9;
    color: #0044CC !important;
}


/* ==============================================
   【重要】レイアウト崩れ修正用CSS
   ============================================== */

/* --- 1. ヘッダー画像＆キャッチコピーの修正 --- */

/* スライダーエリアの基盤 */
.p-header-slider, 
.p-header-slider__item {
    width: 100%;
    height: 950px; /* 高さ固定 */
    position: relative;
    overflow: hidden;
}

/* 画像を背景として全面に配置 */
.p-header-slider__item-img {
    width: 100%;
    height: 100%;
    position: relative;
}

.hero-bg-img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* 画面いっぱいにトリミングして表示 */
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;
}

.hero-container {
    position: absolute;
    top: 40%;
    left: 5%;
    transform: translateY(-50%) rotate(-7deg);
    z-index: 10;
    width: auto;
    padding: 0;
    margin: 0;
}

/* テキストのアニメーション設定 */
.hero-text {
    font-family: "Noto Sans JP", sans-serif;
    font-weight: 700;
    color: #00a1ff; /* 水色 */
    text-shadow: 0 0 20px rgba(255,255,255,0.8); /* 読みやすくするために白光彩 */
    line-height: 1.2;
    margin-bottom: 20px;
    
    /* アニメーション初期状態 */
    opacity: 0;
    transform: translateX(-50px);
    transition: opacity 1.5s ease, transform 1.5s ease;
    
    /* 文字崩れ防止 */
    white-space: nowrap; 
    display: flex;
    align-items: baseline;
}

.hero-text.fade-in {
    opacity: 1;
    transform: translateX(0);
}



/* --- スマホでのヘッダー調整 --- */
@media (max-width: 768px) {
    .p-header-slider, 
    .p-header-slider__item {
        height: 435px; /* スマホでは高さを抑える */
    }
	.p-header-slider {
        margin-bottom:-50px;
    }

    .hero-container {
        top: 45%;
        left: 0%; /* 少し左寄せを緩和 */
        transform: translateY(-50%); /* スマホでは回転をなくして読みやすくする */
    }

    .kanji { font-size: 40px; }
    .hiragana { font-size: 25px; }
    
    .hero-text {
        flex-wrap: wrap; /* 文字がはみ出たら折り返す */
        white-space: normal;
    }
}


/* --- 2. メニューバーの修正（スマホ・PC共通） --- */

/* ナビ全体 */
.l-header__nav {
    background-color: #fff !important; /* 白背景 */
}

.p-global-nav {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    width: 100%;
    margin: 0 auto;
    padding: 0;
}

/* PCでのメニュー項目 */
@media (min-width: 992px) {
    .p-global-nav > li {
        border: none !important;
        margin: 0;
        padding: 0 15px;
    }

    .p-global-nav > li > a {
        color: #333 !important;
        font-weight: 700;
        text-decoration: none;
        font-size: 14px;
        line-height: 80px; /* ヘッダー高さに合わせる */
        display: block;
    }
    
    /* 応募ボタン(PC) */
    .nav-btn-entry {
        background-color: #0044CC;
        color: #fff !important;
        padding: 12px 30px;
        border-radius: 30px;
        line-height: 1;
    }
}



/* ==============================================
   ヘッダー「応募はこちら」ボタン（強制適用版）
   ============================================== */

/* 親要素を含めて指定し、優先度を高める */
li.nav-item-cta a.nav-btn-entry,
li.nav-item-cta a.nav-btn-entry span {
    background-color: #0044CC !important;    /* 背景：青 */
    color: #ffffff !important;               /* 文字：白 (強制) */
    border: 2px solid #0044CC !important;    /* 枠線：青 */
    opacity: 1 !important;                   /* 透明度リセット */
    text-decoration: none !important;        /* 下線なし */
}

/* ホバー時（マウスを乗せた時）：白背景・青文字 */
li.nav-item-cta a.nav-btn-entry:hover,
li.nav-item-cta a.nav-btn-entry:hover span {
    background-color: #ffffff !important;    /* 背景：白 */
    color: #0044CC !important;               /* 文字：青 (強制) */
}

/* ==============================================
   画像の表示位置調整 (顔が見切れないようにする)
   ============================================== */

/* --- TOP画像 (メインビジュアル) --- */
/* PC表示時：画像の「上部」を基準に表示 */
.p-header-slider__item-img {
    background-position: center top !important; 
}

/* スマホ表示時：画像の「中心よりやや上」を基準に表示 */
@media (max-width: 767px) {
    .p-header-slider__item-img {
        background-position: center 20% !important; /* 上から20%の位置を基準 */
    }
}


/* --- 社員の声 (一覧などのサムネイル) --- */
/* 画像タグ (img) で表示されている場合 */
.cardlink_thumbnail img,
.p-hover-effect--type1 img,
.p-hover-effect--type2 img,
.p-article05__img {
    object-position: center top !important; /* 上部を優先して表示 */
}

/* もし「上すぎる」場合は数値を指定 (例: 上から20%の位置) */
/* .cardlink_thumbnail img { object-position: center 20% !important; } */


/* --- 新卒・中途採用ページのメイン画像 --- */
.job-main-image img {
    object-position: center top !important;
}

/* スマホで特に調整が必要な場合 */
@media (max-width: 767px) {
    .job-main-image img {
        object-position: center 15% !important; /* 少し下げる */
    }
}

/* ==============================================
   1. 社員の声セクション：テキスト位置調整
   ============================================== */
/* 画像の上に被るテキストを下に移動させる */
.p-hover-effect--type1 .caption,
.p-member-list .caption { /* クラス名がテーマにより異なる場合の保険 */
    top: auto !important;          /* 上部基準の配置を解除 */
    bottom: 0 !important;          /* 一番下に配置 */
    transform: none !important;    /* 中央寄せの計算を解除 */
    width: 100% !important;        /* 幅を一杯に */
    padding: 20px 10px !important; /* 余白調整 */
    background: linear-gradient(to top, rgba(0,0,0,0.8), transparent) !important; /* 文字が見やすいようにグラデーション背景を追加 */
    box-sizing: border-box;
}

/* 役職名のフォントサイズ調整（スマホで大きすぎないように） */
.p-hover-effect--type1 .caption h4,
.p-hover-effect--type1 .caption p {
    margin-bottom: 5px;
    text-shadow: 0 1px 3px rgba(0,0,0,0.8); /* 文字の影 */
}


/* ==============================================
   2. BUSINESSセクション：スマホ対応
   ============================================== */
@media (max-width: 767px) {
    /* セクション全体の余白調整 */
    .p-index-content01, 
    .p-company-header,
    section:has(.p-btn) { /* 該当セクションを内包するエリア */
        padding-left: 20px !important;
        padding-right: 20px !important;
        box-sizing: border-box;
    }

    /* テキストの折り返しとサイズ調整 */
    .p-index-content01__desc,
    .p-message-text { 
        font-size: 14px !important;
        line-height: 1.8 !important;
        text-align: justify; /* 両端揃えで見やすく */
        width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        word-wrap: break-word;
    }

    /* 社長名などの右寄せ要素 */
    .p-index-content01__desc span, 
    p[style*="text-align: right"] {
        display: block;
        margin-top: 20px;
        text-align: right;
    }

    /* ボタンエリアの縦並び */
    .p-btn {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 15px; /* ボタン間の隙間 */
    }
    .p-btn a {
        margin: 0 !important;
        width: 100%;
        max-width: 300px;
    }
}



/* ==============================================
   1. 社員の声：テキスト位置の調整
   ============================================== */
/* 役職ラベルを画像の下部に移動 */
.interview-tag {
    top: auto !important;          /* 上位置の指定を解除 */
    bottom: 0 !important;          /* 下に配置 */
    left: 0 !important;
    width: 100% !important;        /* 幅を横いっぱいに */
    padding: 8px 10px !important;  /* 余白 */
    background: rgba(0, 68, 204, 0.9) !important; /* 背景色（ウイングブルー透過） */
    color: #fff !important;        /* 文字色 */
    text-align: center;            /* 中央寄せ */
    box-sizing: border-box;
}

/* ==============================================
   2. BUSINESSセクション：スマホ対応
   ============================================== */
@media (max-width: 767px) {
    /* コンテンツを縦並びにする */
    .business-content-wrapper {
        display: flex;
        flex-direction: column-reverse; /* 画像を上にしたい場合は column-reverse を column に変更 */
        gap: 30px;
    }

    /* テキストと画像の幅を100%に */
    .business-text,
    .business-image {
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* テキストの調整 */
    .business-text .description {
        font-size: 14px;
        line-height: 1.8;
        text-align: justify; /* 両端揃え */
    }

    /* ボタンエリアを縦並びに */
    .business-text .cta-group {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 15px;
        margin-top: 30px;
    }
    
    .business-text .cta-group a.btn {
        width: 100%;
        max-width: 300px;
        margin: 0;
    }
}



/* ==============================================
   4. 画像の見切れ・位置調整
   ============================================== */

/* --- TOPメイン画像 --- */
/* 強制的に高さを確保し、顔が見えやすい位置(上寄り)でトリミング */
.p-header-slider__item-img img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;     /* 枠に合わせてトリミング */
    object-position: center 20% !important; /* 上から20%の位置を基準（顔が切れにくい） */
}

/* --- 社員の声 画像 --- */
/* 枠内で顔が見えるように上寄せ */
.interview-img-box img.voice_img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top !important; /* 常に一番上を基準にする */
}

/* 画像ボックス自体の高さ確保（もし潰れている場合） */
.interview-img-box {
    aspect-ratio: 3 / 4; /* 縦長比率を維持 */
    overflow: hidden;
    position: relative;
}
/* ==============================================
   1. BUSINESSセクション：スマホ対応
   ============================================== */
@media (max-width: 767px) {
    /* 全体を縦並びにする */
    .business-content-wrapper {
        display: flex;
        flex-direction: column-reverse; /* 画像を上にしたい場合は column-reverse を column に変更 */
        gap: 30px;
    }

    /* 画像とテキストの幅を100%にする */
    .business-text,
    .business-image {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* 画像の幅調整 */
    .business-image img {
        width: 100% !important;
        height: auto !important;
    }

    /* テキストの調整 */
    .business-text .description {
        font-size: 14px;
        line-height: 1.8;
        text-align: justify; /* 両端揃えで見やすく */
        width: 100%;
    }

    /* ボタンエリアを縦並びにする */
    .business-text .cta-group {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 15px;
        margin-top: 30px;
        width: 100%;
    }
    
    /* ボタンの幅調整 */
    .business-text .cta-group a.btn {
        width: 100%;
        max-width: 300px;
        margin: 0 auto;
        box-sizing: border-box;
    }
}


/* ==============================================
   2. TOP画像・社員の声画像：見切れ修正
   ============================================== */

/* --- TOPメイン画像 --- */
/* 強制的に画像を表示し、顔が見えやすい位置でトリミング */
.p-header-slider__item-img img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;           /* 枠いっぱいに表示 */
    object-position: center 20% !important; /* 上から20%の位置を中心に（顔が切れにくい） */
    position: absolute !important;          /* 配置を絶対位置に固定 */
    top: 0; left: 0;
}

/* スマホでの高さ確保（もし画像が潰れる場合） */
@media (max-width: 767px) {
    .p-header-slider__item {
        height: 50vh !important; /* 画面の高さの60%を確保 */
    }
	
	.p-header-slider__item-img img {
    height: 400px !important;
	top: -35px;
}
}

/* --- 社員の声 画像 --- */
/* 枠内で顔が見えるように上寄せ */
.interview-img-box img.voice_img {
    width: 100%;
    height: 100%;
    object-fit: cover !important;
    object-position: center top !important; /* 常に一番上（頭）を基準にする */
}

/* 画像ボックス自体の高さ確保 */
.interview-img-box {
    aspect-ratio: 3 / 4; /* 縦長比率を維持 */
    overflow: hidden;
    position: relative;
}



/* ==============================================
   1. BUSINESSセクション：テキスト見切れ修正
   ============================================== */
@media (max-width: 767px) {
    /* BUSINESSセクション全体の余白を調整 */
    .business-section {
        padding-left: 20px !important;
        padding-right: 20px !important;
        overflow: hidden; /* はみ出し防止 */
		padding: 0px 0px 50px 0px;
    }

    /* 見出し（お客様の...）のサイズ調整 */
    .main-jp {
        font-size: 22px !important; /* スマホで見やすいサイズに縮小 */
        line-height: 1.5 !important;
        word-break: break-all;      /* 長い単語でも折り返す */
        white-space: normal !important; /* 改行を許可 */
        width: 100% !important;
    }

    /* テキストエリアの幅確保 */
    .business-text {
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 !important;
        margin: 0 auto !important;
    }
}

/* ==============================================
   【ニトリ風】スマホメニュー完全修正版 (右スライド・デザイン刷新)
   ============================================== */
@media (max-width: 1199px) {
    /* --------------------------------------------------
       1. メニュー本体 (ドロワー) の設定
       -------------------------------------------------- */
    #js-header__nav,
    nav#js-header__nav {
        display: block !important; /* アニメーションさせるためblockにする */
        position: fixed !important;
        top: 0 !important;
        right: -100% !important; /* 初期位置：画面の右外 */
        left: auto !important;   /* 左位置指定を解除 */
        
        width: 85% !important;   /* 画面の85%を覆う (ニトリ風) */
        height: 100vh !important;
        background-color: #fff !important;
        z-index: 99999 !important;
        
        /* スムーズなスライド動作 */
        transition: right 0.4s cubic-bezier(0.25, 1, 0.5, 1) !important;
        
        /* 影をつけて階層を表現 */
        box-shadow: -10px 0 30px rgba(0,0,0,0.1) !important;
        
        padding-top: 80px !important; /* ハンバーガーボタンとの被りを防ぐ */
        padding-bottom: 50px !important;
        overflow-y: auto !important;
        visibility: visible !important;
        opacity: 1 !important;
    }

    /* メニューが開いた時の状態 */
    #js-header__nav.is-active,
    .l-header__nav.is-active {
        right: 0 !important; /* 画面右端にピタッと配置 */
    }

    /* --------------------------------------------------
       2. メニューリストのデザイン (リスト・枠線)
       -------------------------------------------------- */
    .p-global-nav {
        display: block !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .p-global-nav > li {
        display: block !important;
        width: 100% !important;
        margin: 0 !important;
        border: none !important;
        border-bottom: 1px solid #e0e0e0 !important; /* 薄いグレーの線 */
        box-sizing: border-box;
    }

    /* リンクのスタイル (文字サイズ・余白) */
    .p-global-nav > li > a {
        display: flex !important;
        justify-content: space-between; /* 文字とアイコンを左右に */
        align-items: center;
        width: 100% !important;
        padding: 20px 25px !important; /* 広めの余白で押しやすく */
        
        font-family: "Noto Sans JP", sans-serif;
        font-size: 15px !important;
        font-weight: 700 !important;
        color: #333 !important;
        text-decoration: none !important;
        background: #fff !important;
        transition: background 0.3s;
    }

    /* タップ時の反応 */
    .p-global-nav > li > a:active {
        background-color: #f5f5f5 !important;
    }

    /* 右矢印アイコンの追加 (擬似要素) */
    .p-global-nav > li > a::after {
        content: "›"; /* または画像アイコン */
        font-size: 20px;
        color: #ccc;
        transform: translateY(-2px);
    }

    /* --------------------------------------------------
       3. サブメニュー (新卒・中途) のデザイン
       -------------------------------------------------- */
    .p-global-nav .sub-menu {
        display: block !important;   /* 常に表示 */
        position: static !important; /* 浮かせない */
        width: 100% !important;
        background-color: #f7f8fa !important; /* 少し背景色を変える */
        box-shadow: none !important;
        padding: 0 !important;
        margin: 0 !important;
        border-top: 1px solid #eee !important;
    }

    .p-global-nav .sub-menu li {
        border-bottom: 1px solid #eee !important;
    }

    .p-global-nav .sub-menu li a {
        padding: 15px 25px 15px 40px !important; /* 字下げ */
        font-size: 14px !important;
        color: #555 !important;
        background: transparent !important;
    }
    
    /* サブメニューの矢印は少し小さく */
    .p-global-nav .sub-menu li a::after {
        font-size: 16px;
    }

    /* --------------------------------------------------
       4. 「応募はこちら」ボタン (CTA)
       -------------------------------------------------- */
    li.nav-item-cta {
        padding: 30px 20px !important;
        border-bottom: none !important;
        background: transparent !important;
        text-align: center;
    }

    /* ボタン本体のデザイン */
    li.nav-item-cta a.nav-btn-entry {
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 auto !important;
        padding: 18px 0 !important; /* 高さを出す */
        
        background-color: #0044CC !important; /* ウイングブルー */
        color: #fff !important;
        font-size: 16px !important;
        font-weight: 700 !important;
        border-radius: 50px !important; /* 丸く */
        box-shadow: 0 5px 15px rgba(0, 68, 204, 0.3) !important;
    }
    
    /* 応募ボタンの矢印は消す */
    li.nav-item-cta a.nav-btn-entry::after {
        display: none !important;
    }

/* --------------------------------------------------
       5. 閉じるボタンの表示・スタイル設定
       -------------------------------------------------- */
    #js-header__nav-close,
    .l-header__nav-close {
        display: block !important; /* 表示させる */
        position: absolute;
        top: 20px;
        right: 20px;
        width: 44px;
        height: 44px;
        background: #f0f0f0 !important; /* 薄いグレーの背景 */
        border: none !important;
        border-radius: 4px;
        font-size: 0 !important; /* "Close"という文字を消す */
        cursor: pointer;
        z-index: 100000; /* 最前面に */
        transition: background 0.3s;
    }
    
    #js-header__nav-close:hover {
        background: #e0e0e0 !important;
    }

    /* ×印をCSSで描画 */
    #js-header__nav-close::before,
    #js-header__nav-close::after {
        content: "";
        position: absolute;
        top: 50%;
        left: 50%;
        width: 24px;
        height: 2px;
        background-color: #333;
        transform-origin: center;
    }

    #js-header__nav-close::before {
        transform: translate(-50%, -50%) rotate(45deg);
    }

    #js-header__nav-close::after {
        transform: translate(-50%, -50%) rotate(-45deg);
    }
	/* ==============================================
   6. ボタン重なり・表示崩れの修正 (追加)
   ============================================== */

/* --- メニュー展開中は、元のハンバーガーボタン(≡)を非表示にする --- */
#js-menu-btn.is-active,
.p-menu-btn.is-active {
    opacity: 0 !important;
    pointer-events: none !important; /* クリックできないようにする */
    visibility: hidden !important;
}

/* --- 閉じるボタン内の余計な文字やアイコンを消す --- */
/* テーマ標準のテキストやspanタグを強制非表示にし、CSSで作った「×」だけ見せる */
#js-header__nav-close *, 
.l-header__nav-close * {
    display: none !important;
}

/* 閉じるボタンのスタイル再調整（念のため） */
#js-header__nav-close,
.l-header__nav-close {
    display: block !important;
    font-size: 0 !important; /* ボタン直下のテキスト対策 */
    color: transparent !important;
    background: #f0f0f0 !important; /* 背景色を確保 */
}

/* ×印（擬似要素）は表示させる */
#js-header__nav-close::before,
#js-header__nav-close::after {
    display: block !important;
    visibility: visible !important;
}
	
	/* ==============================================
   7. スマホヘッダー・ボタン位置の修正（ニトリ風固定ヘッダー）
   ============================================== */
@media (max-width: 1199px) {
    /* --- ヘッダー本体を画面上部に固定 --- */
    .l-header,
    header#js-header {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 60px !important; /* ヘッダーの高さを60pxに指定 */
        background-color: #fff !important; /* 白背景 */
        box-shadow: 0 2px 5px rgba(0,0,0,0.05) !important; /* 薄い影 */
        z-index: 99999 !important; /* 最前面に */
        padding: 0 !important;
        display: flex !important;
        align-items: center !important;
    }

    /* --- ハンバーガーボタン(≡)の位置調整 --- */
    .c-menu-btn,
    #js-menu-btn {
        position: fixed !important; /* ヘッダーに合わせて固定 */
        top: 0 !important;          /* 基準を画面最上部に */
        right: 0 !important;
        
        /* 60pxのヘッダーの真ん中に来るように余白で調整 */
        /* ボタンの高さ等により微調整が必要ですが、概ねこの設定で収まります */
        margin-top: 10px !important;  
        margin-right: 15px !important;
        
        z-index: 100000 !important; /* ヘッダーより手前に */
        background: transparent !important; /* 背景色はなし */
    }
    
    /* --- ロゴの位置調整（左寄せ） --- */
    .l-header__logo {
        margin-left: 15px !important;
        z-index: 100000 !important;
        display: flex;
        align-items: center;
        height: 100%;
    }
    .l-header__logo img {
        max-height: 40px !important; /* ロゴがはみ出さないように */
        width: auto !important;
    }

    /* --- コンテンツがヘッダーに隠れないようにする --- */
    /* ヘッダーが60px分浮くので、その分ページ全体を下げる */
    body {
        padding-top: 60px !important;
    }
}
	
}

/* --------------------------------------------------
   6. 背景固定 (メニューが開いた時に後ろをスクロールさせない)
   ※ bodyタグにクラスが付与される前提
   -------------------------------------------------- */
body.is-locked {
    overflow: hidden !important;
    height: 100vh !important;
}
/* --- パターンB：枠線スタイル --- */
.nav-list {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    padding: 12px 35px !important;
    min-width: 180px;
    
    background-color: #fff !important;
    color: #0044CC !important; /* 青文字 */
    border: 2px solid #0044CC !important; /* 青い枠線 */
    border-radius: 4px !important; /* 角を少し丸く */
    
    font-size: 13px !important;
    font-weight: 700 !important;
    letter-spacing: 0.05em;
    text-decoration: none !important;
    transition: all 0.3s ease;
}


/* ホバー時の動き */
.nav-list:hover {
    background-color: #0044CC !important;
    color: #fff !important;
}

.nav-list:hover::before {
    border-color: #fff;
}

/* ==============================================
   トップページ：キャッチコピーの修正（PC・スマホ分離）
   ============================================== */

.hero-container {
    position: absolute;
    top: 40%;
    left: 5%;
    transform: translateY(-50%) rotate(-7deg);
    z-index: 10;
    width: auto;
    padding: 0;
    margin: 0;
}

.hero-text {
    /* 共通の色設定（水色） */
    color: #009cff; 
    line-height: 1.4;
}

/* --- PC表示（画面幅 769px以上） --- */
@media (max-width: 769px) {
    .hero-container {
        /* 画面中央より少し左、垂直位置は中央 */
        top: 45%;
        left: 0;
        transform: translateY(-50%);
        width:100%;
        max-width: 100%;
		text-align:center;
    }

    .hero-text {
        /* PCでは固定サイズで崩れを防ぐ */
        margin-bottom: 20px;
        white-space: nowrap; /* 勝手な改行を防ぐ */
    }

    /* 漢字のサイズ */
    .kanji {
        font-size: 80px; 
    }

    /* ひらがなのサイズ */
    .hiragana {
        font-size: 50px;
    }
    
    /* 1行目と2行目の間隔 */
    .line-1 {
        margin-bottom: 10px;
    }
	
	.numbers-digest-section{
		padding:0px;
	}
}

/* --- スマホ表示（画面幅 768px以下） --- */
@media (max-width: 768px) {
    .hero-container {
        top: 45% !important;
        left: 0% !important;
        width: 100% !important;
        padding: 0 !important;
        transform: translateY(-50%) !important;
        text-align: center;
    }

    .hero-text {
        display: block !important;
        width: 100% !important;
        margin-bottom: 15px !important;
        white-space: normal !important;
        line-height: 1.2 !important;
    }

    /* 画面幅に合わせて伸縮させる（ここが重要） */
    .kanji { font-size: 15vw !important; }
    .hiragana { font-size: 11vw !important; }
}

/* 文字サイズ */
.kanji { font-size: 170px; }
.hiragana { font-size: 110px; }


/* --- キャッチコピーの改行制御 --- */

/* PCでは改行タグを非表示（無効）にする */
.sp-br {
    display: none;
}

/* スマホでは改行タグを表示（有効）にする */
@media (max-width: 768px) {
    .sp-br {
        display: block;
    }
    
    /* 念のため行間を調整 */
    .hero-text {
        line-height: 1.4 !important;
    }
	
	.work-intro-section {
    padding: 0px 0;
}
	.work-desc {
    font-size: 12px;
	}
	.work-main-list {
    gap: 0px; 
    margin-bottom: 0px;
	}
	
	.interview-img-box img.voice_img {
    height: 65%;
	}
	.header-desc {
    font-size: 12px;
	}
	
	.unit-prefix { font-size: 12px; margin-right: 0px;}
}
/* ==============================================
   福利厚生セクション：スマホ表示の調整
   ============================================== */

@media (max-width: 480px) {
    /* 福利厚生の説明文を非表示 */
    .welfare-digest-section .welfare-text {
        display: none !important;
    }

    /* カードの高さを少し詰める（文字が消えた分） */
    .welfare-digest-section .welfare-card {
        min-height: 150px !important; /* 元の高さより少し小さく設定 */
        padding: 20px 10px !important;
        justify-content: center !important; /* 中央寄せ */
    }

    /* アイコンとタイトルのバランス調整 */
    .welfare-digest-section .welfare-icon {
        margin-bottom: 10px !important;
    }
    
    .welfare-digest-section .welfare-title {
        margin-bottom: 0 !important; /* 下の余白を消す */
    }
}