body{
    font-family: 'Noto Serif JP', serif;
}
#mainview_kyujin {
    width: 100%;
    position: relative;
    padding-top: 900px; /* この値は元の画像の縦横比に合わせて調整してください */
    overflow: hidden;
    
    display: flex;
    align-items: center; /* コンテンツを垂直中央に配置 */
    justify-content: center; /* コンテンツを水平中央に配置 */
    flex-direction: column;

    color: #fff;
    text-shadow: 0 0 8px rgb(0 0 0 / 50%), 0 0 8px rgb(0 0 0 / 50%);
    letter-spacing: .85em;
    transition-duration: 1.5s;
}

/* デスクトップ版の背景画像（擬似要素） */
#mainview_kyujin::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url(//www.serious.co.jp/kanri/wp-content/themes/serious/css/../img/kyujin/kyujin_top_02.jpg) center 60px no-repeat;
    background-size: cover;
    background-attachment: fixed;
    z-index: -1; /* コンテンツより後ろ */
}

/* 背景画像に重ねる色のエフェクト（::afterを使用する場合） */
#mainview_kyujin::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
/*     background: linear-gradient(to bottom right, rgba(0, 255, 0, 0.2), rgba(255, 255, 255, 0.2)); */
    mix-blend-mode: color;
    pointer-events: none;
    z-index: 0; /* 背景画像とコンテンツの間 */
}

/* ★★★ ここを変更/追加 ★★★ */
/* #mainview_kyujin内の直接の子要素（通常はコンテンツが入る） */
#mainview_kyujin > * { 
    position: relative;
    z-index: 1; /* 背景画像やエフェクト層より手前に表示 */
    
    /* コンテンツを画像の上で適切な位置に配置するための調整 */
    /* これが重要です。画像の高さやヘッダーの高さに合わせて調整してください */
    /* 例: 固定ヘッダーの高さが76pxの場合 */
    padding-top: 76px; /* もし上部に固定ヘッダーがあるなら、その分下げる */
    
    /* さらにコンテンツを画像の中央より下げる場合は、margin-topやpadding-topを追加 */
    /* 例: 画像の中央からさらに下に配置したい場合 */
    margin-top: auto; /* flexboxで下寄りにする */ 
    padding-bottom: 20px; /* 必要なら下にも余白 */
}


/* スマホサイズ (画面幅が950px以下) でのスタイル */
@media screen and (max-width: 950px) {
    #mainview_kyujin {
        padding-top: 85%; /* スマホ用画像の縦横比に合わせて調整 */
		margin-top: 15vw;
    }

    #mainview_kyujin::before {
        background-image: url(//www.serious.co.jp/kanri/wp-content/themes/serious/css/../img/kyujin/sp_kyujin_top.jpg);
        background-position: center center;
		background-attachment: local;
    }

    /* ★★★ スマホサイズでのコンテンツの位置調整 ★★★ */
    #mainview_kyujin > * {
        padding-top: 50px; /* スマホ用に調整 (デスクトップと異なる場合) */
        margin-top: auto; /* flexboxで下寄りにする */
    }
}
.kyujin_sec {
    background-color: #005200;
    text-align: center;
	padding: 60px 0;
	color:white;
}
.kyujin_sec h2{
    font-size: 45px;
    font-family: 'Noto Serif JP Variable', serif;
	font-weight: bold;
    margin: 0;
}

.kyujin_nav {
    /* box-shadow: 0 0 8px rgb(0 0 0 / 30%); */
    /* margin-top: -28px; */
    margin: 90px auto !important;
    display: table;
    max-width: 1200px;
    width: 100%;
    padding-left: 0;
}
.kyujin_nav li {
    width: 33%;
    float: left;
    background: #fff;
    list-style: none;
}
.kyujin_nav li a.on {
    background: #fff;
    color: rgba(0, 82, 0, 1);
}
.kyujin_nav li a {
    display: block;
    text-align: center;
    padding: 15px 5px;
    /* background: rgba(0, 82, 0, 1); */
    border: solid 1px #fff;
    color: #fff;
    transition: all .5s;
}

@font-face {
    font-family: 'Noto Serif JP Variable'; /* フォントに任意の名前を付ける */
    src: url('../fonts/NotoSerifJP-VariableFont_wght.ttf') format('truetype'); /* CSSからの相対パス */
    font-weight: 100 900; /* 可変フォントの対応する太さの範囲 */
    font-display: swap; /* フォント読み込み中の表示を制御 (推奨) */
}

@media screen and (max-width: 768px) {
    .kyujin_sec h2{
        font-size: 5vw;
    }
    .kyujin_sec p{
        font-size: 2.5vw;
    }
    .kyujin_nav li {
    width: 72%;
    float: none;
    background: #fff;
    margin: auto;
    list-style: none;
    }
    .kyujin_nav li a {
    display: block;
    text-align: center;
    padding: 0px 0;
    }
}

.kyujin_nav img {
    transition: box-shadow 0.3s ease-in-out; /* スムーズなアニメーション効果 */
}

/* 画像にマウスが乗ったときのスタイル */
.kyujin_nav img:hover {
    filter: drop-shadow(0 0 5px #005200);  /* ぼやけた青い影を追加 */
}

.kyujin_box {
    padding: 100px 0;
    background-color: azure;
    margin: auto;
    text-align: center;
    background: url(../img/kyujin/as227.jpeg) center center no-repeat;
    background-size: cover;
    background-attachment: fixed !important;
    position: relative; /* 擬似要素を重ねるための基準 */
    overflow: hidden; /* 擬似要素がはみ出さないようにクリップ */
    min-height: 300px; /* 例: 背景画像が見える最低限の高さ */
    width: 100%; /* 例: 幅 */
    
}
.kyujin_box::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
        /* 緑と白の半透明グラデーションを重ねる */
    /* RGBAの最後の値 (0.2) で透明度を調整します */
    background: linear-gradient(to bottom right, rgb(0 158 157 / 34%), #18a13d47);
        /* 下の背景画像の色とブレンドするモード */
    /* 'color'は色相と彩度を下の画像から、輝度を擬似要素から取る */
    /* 他のモード (overlay, screen, multiply, lighten など) も試してみてください */
    mix-blend-mode: color; 
    pointer-events: none; /* マウスイベントを下の要素に通す */
}
.kyujin_box span {
   display: inline-block;
   text-shadow: 0 0 6px #000, /* 中央に広がるぼやけた影 */
                 /* 2つ目以降: 縁取り用のくっきり影（ぼかし半径0） */
	-1px -1px 0 #000, /* 左上 */
	1px -1px 0 #000, /* 右上 */
	-1px  1px 0 #000, /* 左下 */
    1px  1px 0 #000; /* 右下 */;
   font-weight: bold;
   color: white;
}
.kyujin_box a span {
   display: inline-block;
}
.kyujin_box a {
    font-size: 18px;
    transition: all .5s;
    background: #fff;
    color: rgba(0, 82, 0, 1);
    border: solid 1px rgba(0, 82, 0, 1);
    line-height: 100%;
    padding: 20px 20px;
}
.kyujin_box a:hover {
    background: rgba(0, 82, 0, 1);
    color: #fff;
}

/* 画像のホバーエフェクト（ホバーで拡大等） */
img {
    /* 初期状態のスタイル */
    transition: transform 0.3s ease-in-out; /* 拡大アニメーションをスムーズにする */
    display: block; /* img要素のデフォルトの隙間をなくすため */
    max-width: 100%; /* 親要素からはみ出さないように */
    height: auto; /* 高さは自動調整 */
	overflow: hidden; 
}

img:hover {
    /* ホバー時のスタイル */
    transform: scale(1.05); /* 1.05倍に拡大 (5%拡大) */
}
/* ホバーで影響を受けた箇所の調整 */
.company .tl_img02 img {
    margin: auto;
}
.company .tl_img img {
    margin: auto;
}
.sale .tl img {
	margin: auto;
}

/* ▼▼求人・成長サポートページ（kyujin-support.php用）▼▼ */
/* 全体的な設定 */
.flow-container {
    max-width: 1200px;
    margin: 50px auto;
    padding: 20px;
    background-color: #f0f8ff; /* 画像の背景色に合わせて調整 */
    text-align: center;
    box-sizing: border-box;
}

.flow-title {
    font-size: 2em;
    font-weight: bold;
    margin-bottom: 30px;
    color: #333;
}

.flow-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex; /* Flexboxで横並び */
    justify-content: space-between; /* アイテム間のスペースを均等に */
    align-items: flex-start; /* BOXの上端を揃える */
    flex-wrap: wrap; /* PC版では折り返しを許可 */
}

.flow-item {
    position: relative;
    /* 各BOXの幅を親要素の25%から余白を引いた値に設定。これにより、4つが等幅で並ぶ */
    flex: 0 0 calc(25% - 20px);
    margin: 10px; /* BOX間の余白 */
    box-sizing: border-box;
}

.flow-box {
    background-color: #8a2be2;
    color: #fff;
    padding: 20px 15px;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    text-align: center;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
	min-height: 255px;
}

.step-number {
    display: block;
    font-size: 2.5em;
    font-weight: bold;
    margin-bottom: 10px;
}

.flow-box h3 {
    font-size: 1.5em;
    margin-top: 0;
    margin-bottom: 10px;
}

.flow-box p {
    font-size: 0.9em;
    line-height: 1.5;
    margin-bottom: 0;
}

/* 矢印のスタイル (PC版: 1001px以上) */
.flow-item:not(:last-child)::after {
    content: '';
    position: absolute;
    right: -25px; /* BOXからの位置調整 */
    top: 50%;
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border-top: 20px solid transparent;
    border-bottom: 20px solid transparent;
    border-left: 20px solid #333; /* 矢印の色 */
    z-index: 1;
}

/* 矢印の線 (PC版: 1001px以上) */


/* --- 中間ブレイクポイント (画面幅 851px ～ 1000px) --- */
@media screen and (max-width: 1000px) {
    .flow-item {
        /* この範囲では幅を少し狭め、4つ並びを維持 */
        flex: 0 0 calc(25% - 15px); /* 余白を詰める */
        margin: 7.5px; /* マージンも詰める */
    }
    
    .flow-box {
        padding: 12px 8px; /* パディングを減らす */
    }

    .step-number {
        font-size: 2em; /* 文字サイズを調整 */
    }

    .flow-box h3 {
        font-size: 1.2em; /* 文字サイズを調整 */
    }

    .flow-box p {
        font-size: 0.8em; /* 文字サイズを調整 */
    }

    /* 矢印の位置調整（BOXが小さくなるのに合わせて） */
    .flow-item:not(:last-child)::after {
        right: -10px;
        border-top-width: 12px;
        border-bottom-width: 12px;
        border-left-width: 12px;
    }

}

/* --- さらに狭い中間ブレイクポイント (画面幅 769px ～ 850px) --- */
@media screen and (max-width: 850px) {
    .flow-item {
        flex: 0 0 calc(25% - 10px); /* さらに幅を詰める */
        margin: 5px; /* マージンもさらに詰める */
    }

    .flow-box {
        padding: 8px 5px; /* パディングをさらに減らす */
    }

    .step-number {
        font-size: 1.8em; /* 文字サイズをさらに縮小 */
    }

    .flow-box h3 {
        font-size: 2.0em; /* 文字サイズをさらに縮小 */
    }

    .flow-box p {
        font-size: 1.25em; /* 文字サイズをさらに縮小 */
    }

    /* 矢印の位置調整（BOXが小さくなるのに合わせて） */
    .flow-item:not(:last-child)::after {
        right: -7px;
        border-top-width: 10px;
        border-bottom-width: 10px;
        border-left-width: 10px;
    }
    
}

/* --- スマホブレイクポイント (画面幅 768px 以下) --- */
@media screen and (max-width: 768px) {
    .flow-list {
        flex-direction: column; /* 縦並びにする */
        align-items: center; /* BOXを水平中央寄せ */
        flex-wrap: nowrap; /* 縦並びの際に折り返しを無効にする */
    }

    .flow-item {
        width: 90%; /* スマホでの幅を調整 */
        max-width: 300px; /* スマホでの最大幅（必要なら） */
        margin: 15px auto; /* 縦方向の余白を増やす */
        flex: auto; /* 幅の固定を解除し、自動調整 */
    }

    .flow-box {
        padding: 20px 15px; /* スマホではパディングを戻すか、調整 */
    }

    /* PC版の横矢印と線を非表示にする */
    .flow-item:not(:last-child)::after {
        display: none;
    }
    

    /* スマホ版の縦下向き矢印 */
    .flow-item:not(:last-child)::after {
        content: '';
        display: block; /* 矢印を表示 */
        position: absolute;
        bottom: -35px; /* BOXからの位置をさらに下げる */
        left: 50%;
        transform: translateX(-50%); /* 水平方向の中央寄せ */
        width: 0;
        height: 0;
        border-left: 20px solid transparent; /* 矢印の形 */
        border-right: 20px solid transparent;
        border-top: 20px solid #333; /* 矢印の色と向き */
        z-index: 1;
		top: 104%;
    }
    
}
/* 背景 */
.full-width-background { /* ★新しく追加するスタイル */
    background-color: #f0f8ff; /* 画面端まで広がる背景色 */
    padding: 50px 0; /* flow-containerの上下マージンに合わせて調整 */
}

.flow-container {
    max-width: 1200px;
    margin: 0 auto; /* ★変更: 上下のマージンを0に */
    padding: 20px; /* ★変更: paddingを残して内側の余白を確保 */
    /* background-color: #f0f8ff; */ /* ★削除: 背景色は親に移動 */
    text-align: center;
    box-sizing: border-box;
}

/* ▼▼　採用実績パララックス効果　▼▼ */

/* body要素の基本設定 (変更なし) */
body {
    margin: 0;

}

/* パララックス効果のメインコンテナ (変更なし) */
.parallax-container {
    position: relative; /* 子要素の絶対配置の基準となる */
    width: 100%;
    height: 100vh;
    display: block;
    overflow: hidden;
}

/* メインコンテンツをラップするコンテナ */
.content-wrapper {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    **z-index: 10; /* ★一番奥（背景のすぐ手前） */**
    text-align: center;
    width: 90%;
    max-width: 900px;
    background-color: rgba(255, 255, 255, 0.9);
    padding: 40px;
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    transition: transform 0.1s linear;
}

/* 左側の緑の平行四辺形要素 (画像用) */
.parallax-bg-left {
    position: absolute;
    left: 300px;
    top: 350px;
    width: 100px;
    height: auto;
    **z-index: 20; /* ★ content-wrapper (z-index:10) より高く、影 (z-index:30) より低く */**
    opacity: 0;
    filter: brightness(1.2);
    transform: translateX(-100%);
    transform-origin: top left;
    transition: transform 0.1s linear;
}

/* 右側の緑の平行四辺形要素 (画像用) */
.parallax-bg-right {
    position: absolute;
    right: -50px;
    width: 600px;
    height: auto;
    **z-index: 20; /* ★ content-wrapper (z-index:10) より高く、影 (z-index:30) より低く */**
    opacity: 0;
    filter: brightness(1.1);
    transform: translateX(100%);
    transform-origin: top right;
    transition: transform 0.1s linear;
}

/* 人の影を囲むコンテナ (HTMLを分離したため、位置調整が必要) */
.person-shadow {
    position: absolute; /* ★絶対配置に変更 */
    /* これで content-wrapper や parallax-bg-left/right と同じ層で z-index を比較できる */
    z-index: 30; /* ★ 全ての要素の中で最も高く */
    /* 画面内での位置を調整します。content-wrapper の左側に配置する場合の例 */
    top: 50%; /* 垂直方向の中央 */
    left: calc(50% - (900px / 2) - 100px); /* content-wrapper の左端からさらに左へ */
    transform: translateY(-50%); /* 垂直方向の中央揃え */
    width: 200px; /* 画像の幅に合わせて調整 */
    height: auto; /* 高さは自動調整 */
    display: flex; /* 必要に応じて、img の配置のために flex を維持 */
    justify-content: center;
    align-items: center;
    /* transition: transform 0.1s linear; は元のままで parallax-item 用 */
}
/* .person-shadow img は、親の .person-shadow が absolute なので、
   その中に img が収まるように調整。z-index は親から継承されるため不要になることが多い */
.person-shadow img {
    width: 100%;
    height: auto;
    display: block;
    max-width: 100% !important;
    height: auto !important;
    position: static; /* ★デフォルトに戻す (親が absolute なので relative も不要) */
    /* z-index もここには不要 */
}


/* その他のスタイルは変更なし */
/* testimonial-section から .person-shadow に関連する flex 設定は不要になる可能性あり */
.testimonial-section {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 30px;
    /* flex-direction: column; などのレスポンシブ対応も調整が必要になるかも */
}
/* ... 以下のCSSは前回と変更なし ... */
.main-title, .sub-title, .quote, .message, .call-to-action,
.signer-name, .signer-name-main, .signer-position {
    position: relative;
    transition: transform 0.1s linear;
}
.main-title { font-size: 2.5em; font-weight: bold; color: #333; margin-bottom: 5px; }
.sub-title { font-size: 1.2em; color: #555; margin-bottom: 30px; }
.testimonial-content { text-align: left; flex-grow: 1; }
.quote { font-size: 2.2em; font-weight: bold; color: #2c7ac7; margin-bottom: 15px; }
.message { font-size: 1.1em; line-height: 1.6; color: #444; margin-bottom: 10px; }
.call-to-action { font-size: 1.2em; font-weight: bold; color: #28a745; margin-bottom: 25px; }
.signer-info { text-align: right; margin-top: 20px; }
.signer-name { font-size: 0.9em; color: #666; margin-bottom: 5px; }
.signer-name-main { font-size: 1.5em; font-weight: bold; color: #333; margin-bottom: 5px; }
.signer-position { font-size: 0.9em; color: #666; line-height: 1.4; }
@media (max-width: 768px) {
    .testimonial-section { flex-direction: column; text-align: center; }
    /* .person-shadow の位置調整もここでレスポンシブ対応が必要になる */
    .person-shadow {
        position: relative; /* モバイルでは通常の流れに戻すか、再調整 */
        left: auto;
        top: auto;
        transform: none;
        margin-bottom: 20px;
    }
    .testimonial-content { text-align: center; }
    .signer-info { text-align: center; }
    .main-title { font-size: 2em; }
    .quote { font-size: 1.8em; }
}
.slidein {
    /* 初期スタイルはここで設定しない */
}
.slidein.scrollin {
    transform: translate(0, 0) !important;
    opacity: 1 !important;
    transition: transform 1.0s ease-out, opacity 1.0s ease-out;
}
.scroll-space {
    box-sizing: border-box;
    color: #fff;
}
.scroll-space .blue {
    background: #77BBCF;
    width: 200px;
    height: 200px;
    padding: 30px;
    margin: 0 auto 50px;
}
.scroll-space .pink {
    background: #FFB4B4;
    width: 200px;
    height: 200px;
    padding: 30px;
    margin: 0 auto 50px;
}
.scroll-space .yellow {
    background: #F8913C;
    width: 200px;
    height: 200px;
    padding: 30px;
    margin: 0 auto 50px;
}
.scroll-space .green {
    background: #26AA5A;
    width: 200px;
    height: 200px;
    padding: 30px;
    margin: 0 auto 50px;
}