.responsive-image-override {
 
  height: auto !important;
}

/* PCとSPで画像の表示を切り替えるためのメディアクエリ */
@media (max-width: 768px) {
  #rec_top .pc_only {
    display: none !important;
  }
  #rec_top .sp_only {
    display: block !important;
  }
}

@media (min-width: 769px) {
  #rec_top .pc_only {
    display: block !important;
  }
  #rec_top .sp_only {
    display: none !important;
  }
}

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-color: #005200;
	
}

/* 画像のホバーエフェクト（ホバーで拡大等） */
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;
    justify-content: space-between;
    /* --- ここを修正 --- */
    /* 現在: align-items: flex-start; */
    align-items: stretch; /* 子要素を垂直方向に引き伸ばして高さを揃える */
    /* --- 修正ここまで --- */
}

.flow-item {
    position: relative;
    flex: 0 0 calc(25% - 20px);
    margin: 10px;
    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: 255px; を削除するか auto に変更してください。*/
    /* align-items: stretch が機能するために、この固定の高さ指定は不要です */
    height: auto; /* もしくはこの行自体を削除 */
    /* min-height は残しておくと、内容が少ない場合でも最低限の高さが保証されます */
    min-height: 255px; 
    /* --- 修正ここまで --- */
    display: flex;
    flex-direction: column;
    justify-content: center; /* 子要素（テキストなど）を垂直方向の中央に配置 */
    align-items: center; /* 子要素（テキストなど）を水平方向の中央に配置 */
}

.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;
}

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

/* パララックス効果のメインコンテナ */
.parallax-container {
    position: relative; /* 子要素の絶対配置の基準 */
    width: 100%;
    height: 650px; /* ビューポートの高さいっぱい */
    overflow: hidden; /* はみ出しを隠す */
	text-align: center;
	padding: 50px 0;
    background: linear-gradient(to top, #c7e9f3, #e0f6fb); /* 背景グラデーションをここに移動 */
}

.parallax-container h2 {
	padding-top:20px;
}

.parallax-container2 {
    position: relative; /* 子要素の絶対配置の基準 */
    width: 100%;
    height: 500px; /* ビューポートの高さいっぱい */
    overflow: hidden; /* はみ出しを隠す */
	text-align: center;
	padding: 50px 0;
    background: linear-gradient(to top, #c7e9f3, #e0f6fb); /* 背景グラデーションをここに移動 */
}

/* メインコンテンツをラップするコンテナ */
.content-wrapper {
    position: absolute;
    top: 65%;
    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 は一旦削除 */
	height:375px;
}
.content-wrapper2 {
    position: absolute;
    top: 65%;
    left: 50%;
    transform: translate(-50%, -50%); /* 画面中央に配置 */
    z-index: 1; /* 最も奥（背景のすぐ手前） */
    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 は一旦削除 */
	height:375px;
}
.content-wrapper3 {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* 画面中央に配置 */
    z-index: 1; /* 最も奥（背景のすぐ手前） */
    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 は一旦削除 */
	height:375px;
}

/* 左側の緑の平行四辺形要素 (画像用) */
.parallax-bg-left {
    position: absolute;
    /* left: 10%; /* JSで制御するため削除 */
    /* top: 20%;  /* JSで制御するため削除 */
    width: 100px; /* 必要であれば幅はCSSで指定 */
    height: auto;
    z-index: 6;
}

/* 右側の緑の平行四辺形要素 (画像用) */
.parallax-bg-right {
    position: absolute;
    /* right: 10%; /* JSで制御するため削除 */
    /* top: 30%;  /* JSで制御するため削除 */
    width: 800px; /* 必要であれば幅はCSSで指定 */
    height: auto;
    z-index: 8;
}
/* 右側のオレンジの三角形要素 (画像用) */
.parallax-orn-right {
    position: absolute;
    /* right: 10%; /* JSで制御するため削除 */
    /* top: 30%;  /* JSで制御するため削除 */
    width: 500px; /* 必要であれば幅はCSSで指定 */
    height: auto;
    z-index: 8;
	margin-top:50px;
	margin-left:100px;
}

/* 人の影を囲むコンテナ */
.person-shadow {
    position: absolute;
    z-index: 30; /* 全ての要素の中で最も手前 */
    width: 200px;
    height: auto;
    /* top のみCSSで設定 */
    top: 65% !important;
    /* left: 10%; /* 画面の左端からの相対位置として仮設定 */ <-- この行を削除/コメントアウト */
    transform: translateY(-50%); /* 垂直方向の中央揃え */
    /* display: flex; や justify-content などは削除済み */
    /* transition は一旦削除 */
}

/* .person-shadow img */
.person-shadow img {
    width: 100%;
    height: auto;
    display: block; /* imgをブロック要素にする */
    max-width: 100%;
    height: auto;
    position: static; /* デフォルトのまま */
    /* z-index は削除 */
}

/* 各テキスト要素のスタイル */
.main-title, .sub-title, .quote, .message, .call-to-action,
.signer-name, .signer-name-main, .signer-position {
    /* position: relative; や transition は一旦削除 */
}

.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-section {
    display: flex; /* Flexboxは維持 */
    align-items: center;
    justify-content: center;
	gap: 30px;
}

.testimonial-content {
    text-align: center; /* テキストを中央揃え */
    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 {
        position: relative; /* モバイルでは通常の流れに戻す */
        left: auto;
        top: auto;
        transform: none;
        margin-bottom: 20px;
        order: -1;
    }
    .testimonial-content { text-align: center; }
    .signer-info { text-align: center; }
    .main-title { font-size: 2em; }
    .quote { font-size: 1.8em; }
}

/* スクロールアニメーション関連のCSSは全て削除 */
/* .slidein, .slidein.scrollin, .scroll-space, .blue, .pink, .yellow, .green など */


/* アニメーション */

/* アニメーション前 (右上から不可視) */
.anim-box {
    /* 初期位置を調整：右上から少し中央寄り、かつ遠い位置 */
    transform: translateY(-100px) translateX(200px); /* 以前の -150px/150px から変更 */
    opacity: 0;
}

/* トリガー発火でis-activeを付与 (定位置に移動して表示) */
.anim-box.is-animated {
    /* アニメーション速度は2秒で維持 */
    transition: 30s;
	transition-timing-function: ease-out;
    transform: translateY(0) translateX(0); /* 定位置に戻す */
    opacity: 1;
}

/* 複製したアニメーション1 (例: 上からゆっくりフェードイン) */
.anim-box2 {
    transform: translateY(-200px); /* 上からもっと大きく移動 */
    opacity: 0;
}
.anim-box2.is-animated2 { /* ここも複製 */
    transition: 2.5s; /* 速度を少し遅く */
	transition-timing-function: ease-out;
    transform: translateY(0);
    opacity: 1;
}

/* 複製したアニメーション2 (例: 左から速くフェードイン) */
.anim-box3 {
    transform: translateX(-100px); /* 左から移動 */
    opacity: 0;
}
.anim-box3.is-animated3 { /* ここも複製 */
    transition: 1s; /* 速度を速く */
	transition-timing-function: ease-out;
    transform: translateX(0);
    opacity: 1;
}

/* ▼▼GSAPアニメ */
.box01, .box02, .box03, .box04, .box05, .box_stagger {
/* 	display: flex; */
/* 	align-items: center;
	justify-content: center;
	font-size: 1.5em; */
}

/* リクルートrecruit */
@media screen and (min-width: 768px) {
	.rec_top_p {
		padding-bottom: 35px;
	}
	.rec_top_p_last {
		padding-bottom: 55px;
	}
}
/* TOPページリクルート */
#rec_top {
	text-align:center;
	position: relative;
	height:400px;
	margin:auto;
}
@media screen and (max-width: 1200px) {
	#rec_top {
		width:95%;
	}
}
@media screen and (max-width: 1070px) and (min-width: 768px)  {
	#rec_top {
		height: 320px;
	}
}

#rec_top img {
	max-width:1200px;
	position: absolute;
	top:6%;
}


.re_box1 {
    border: 1px solid #005200;
    padding: 10px;
    background-color: white; /* もし背景色が必要なら */
    /* その他、幅やマージンなど */
	width:600px;
	height:50px;
	margin: auto;
	transition: background-color 1s ease;
}
.re_box2 {
    border: 1px solid #005200;
    padding: 10px;
    background-color: white; /* もし背景色が必要なら */
    /* その他、幅やマージンなど */
	width:300px;
	height:78px;
	margin: auto;
	transition: background-color 1s ease;
}
.re_box1:hover{
    background-color: #005200;
	color: #fff;
} 

.re_box2 span {
	text-shadow:none;
	color:#005200;
	font-weight: normal;
}