/* =======================================
// 基本フォント設定
// ======================================= */
body {
    color: #2f2f2f;
    font-family: "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;

    /*
     * デザイナー指示のフォントサイズは画面幅に依存するvw指定です。
     * ただし、vwだけだとPCで文字が大きくなりすぎたり、スマホで小さくなりすぎることがあります。
     * そのため、clamp() を使って最小14px、最大18pxの範囲に収まるように調整するのがおすすめです。
    */
    font-size: clamp(14px, 3.733vw, 18px);

    line-height: 1.8;
    letter-spacing: 0.1em;
    font-feature-settings: "palt";
}

.bold { font-weight:bold!important; }
.fs_8 { font-size: .8rem; }

/* =======================================
// ローディング画面
// ======================================= */
#loader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #fff; /* ページの背景色と同じにする */
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.5s, visibility 0.5s; /* フェードアウト用 */
}

/* JSでis-loadedクラスが付いたら非表示にする */
#loader.is-loaded {
    opacity: 0;
    visibility: hidden;
}

.spinner {
    width: 50px;
    height: 50px;
    border: 4px solid #f3f3f3;
    border-top: 4px solid #3498db; /* スピナーの色 */
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}


/* =======================================
// ヘッダー固定によるコンテンツの潜り込み防止
// ======================================= */
body {
    padding-top: 66px;
}

@media (max-width: 575.98px) {
    body { padding-top: 53px; }
}
@media (max-width: 390px) {
    body { padding-top: 49px; }
}

.map-container iframe {
    display: block;
}

/* =======================================
// ヘッダー
// ======================================= */

@media (max-width: 575.98px) {
	.navbar { padding: 0 0 0.2rem 0!important; }
}

/* 幅375px未満の非常に狭い画面向けの調整 */
@media (max-width: 560px) {
	.navbar-brand { margin-right:0!important; }
    /* ロゴ画像の高さを少し小さくして幅を詰める */
    .navbar-brand img {
        height: 25px;
        max-width:50vw;
    }

    /* 右側のアイコン間のマージンを少し詰める */
    .d-lg-none > .me-3 {
        margin-right: .5rem !important; /* Bootstrapの me-2 相当 */
    }

    /* アイコン自体のサイズも少し小さくする */
    .d-lg-none img[src*="tel.svg"] {
        height: 24px;
    }
    .d-lg-none img[src*="mail.svg"] {
        height: 19px;
    }
    .navbar-toggler img {
        height: 34px;
    }
}

/* Bootstrapのデフォルトのフォーカススタイルを無効化 */
.navbar-toggler:focus {
    box-shadow: none;
}

/* =======================================
// ヘッダーのアニメーション用スタイル
// ======================================= */

/* ナビゲーションバー自体にoverflow: hiddenを設定し、
   はみ出した子要素（スライドしてくるメニュー）を隠す */
.navbar {
    overflow: hidden;
}

/* アニメーションで表示される黒いボーダー（擬似要素で作成） */
.navbar::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 1px;
    background-color: #000;
    transform: scaleX(0); /* 初期状態では幅0 */
    transform-origin: left; /* 左を起点に広がる */
    transform: scaleX(1);
    transition: transform 0.8s cubic-bezier(0.23, 1, 0.32, 1) 0.5s;
}

/* indexページの場合のみ、アニメーションをJSで制御するため初期状態を非表示にする */
.index-page .navbar::after {
    transform: scaleX(0);
    transition-delay: 0s; /* JSで制御するため遅延をなくす */
}

/* indexページでJSによってクラスが付与されるとアニメーションが開始される */
.index-page .navbar.is-animated::after {
    transform: scaleX(1);
}

/* =======================================
// トップページ (index.php)
// ======================================= */
.hero-section {
    position: relative;
    min-height: 100vh;
    background-color: #fff;
    overflow: hidden;
}

/* 写真とその上に乗る要素を囲むコンテナ */
.hero-image {
    position: relative; /* 子要素を絶対配置するための基準 */
    overflow: hidden; /* はみ出した画像をマスクする */
}

/* パララックスではなく、コンテナ内でスクロールさせるための画像スタイル */
.hero-image > img:first-child {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%; /* コンテナの幅に合わせる */
    height: auto; /* 画像の縦横比を維持 */
    object-fit: cover; /* 念のため指定 */
}

/* テキストを囲むdiv(外枠)の共通スタイル */
.hero-text {
    position: absolute;
    z-index: 2;
    display: flex; /* Flexboxを有効化 */
    justify-content: flex-start; /* 中の要素(img)を左揃えに */
    padding-left: 5vw; /* PC・モバイル共通で左に余白を設定 */
}

/* 採用ボタンの共通スタイル */
.hero-cta {
    position: absolute;
    z-index: 3;
    visibility: hidden;
}

/* --- PCのスタイル --- */
@media (min-width: 769px) {
    .hero-image {
        position: absolute;
        top: 227px;
        left: 0;
        right: 0;
        bottom: 0;
    }

    /* 外枠(div)の位置と幅 */
    .hero-text.nocrane { top: 135px; left: 0; width: 100%; }
    .hero-text.nofuture { top: 17px; left: 0; width: 100%; }
    .hero-text.kimotsuki { top: 135px; left: 0; width: 100%; }
    .hero-text.tsusin { top: 17px; left: 0; width: 100%; }
    
    /* 中の画像(img)の高さ */
    .hero-text img { height: 75px; }

    .hero-cta {
        bottom: 30px;
        right: 5vw;
        width: 153px;
    }
}

/* --- モバイルのスタイル --- */
@media (max-width: 768px) {
    .hero-image {
        position: absolute;
        /* kimotsukiのtop(70px) + 高さ(40px) + 間マージン(12px) */
        top: 122px;
        left: 0;
        right: 0;
        bottom: 0;
    }

    /* 外枠(div)の位置 */
    .hero-text.kimotsuki {
        top: 70px; /* ナビ下から70px */
        left: 0;
        width: 100%;
    }
    .hero-text.tsusin {
        top: 12px; /* 写真の上から12px */
        left: 0;
        width: 100%;
    }
    /* アニメーションで入れ替わるテキストも同様に設定 */
    .hero-text.nocrane {
        top: 70px;
        left: 0;
        width: 100%;
    }
    .hero-text.nofuture {
        top: 12px;
        left: 0;
        width: 100%;
    }

    /* 中の画像(img)のサイズ */
    .hero-text img {
        height: 40px;
        width: auto;
    }

    .hero-cta {
        bottom: 30px;
        right: 5vw;
        width: 100px;
    }
}

/* 採用ボタンの浮遊アニメーション */
@keyframes float-anim {
    0% { transform: translateY(0px); }
    50% { transform: translateY(-12px); }
    100% { transform: translateY(0px); }
}

.hero-cta.is-floating {
    animation: float-anim 4s ease-in-out infinite;
}

/* =======================================
// 会社紹介セクション (index.php)
// ======================================= */
.company-section {
    padding-top: 100px;
}

/* カスタムコンテナ幅 */
.company-container {
    max-width: 970px;
    position: relative;
}

/* 背景画像を持つコンテンツラッパー */
.content-bg-wrap {
    position: relative;
    overflow: hidden;
}

/* 中〜大画面用の装飾背景画像 */
.content-bg-wrap__image-deco {
    position: absolute;
    top: 0;
    right: 0;
    max-width: 45vw;
    z-index: 0;
    display: none;
}
@media (min-width: 768px) and (max-width: 1199.98px) {
    .content-bg-wrap__image-deco {
        display: block;
    }
}

/* 特大画面用の画像 */
.company-image-xl {
    position: absolute;
    top: 0;
    right: 60px;
    max-width: 430px;
    z-index: -1;
}

.company-catchphrase {
    position: relative;
    font-weight: 700;
    font-size: clamp(1.5rem, 4.5vw, 3.5rem);
    line-height: 1.5em;
    margin-bottom: 4rem;
    text-align: justify;
}

.company-section .text-column p, .vehicles-text-section .text-column p, .recruit-text-section .text-column p {
    line-height: 1.7em;
    font-size: clamp(1.2rem, 1.7vw, 1.4rem);
    font-weight: bold;
    text-align: justify;
}

.company-footer {
    margin-top: 5rem;
}

.arrow-wrapper {
    overflow: hidden;
    margin-top: -15px;
    display: flex; /* 追加：子要素の位置調整のためにflexboxを使う */
    justify-content: flex-end; /* 追加：子要素を右端に寄せる */
}

.arrow-svg {
    max-width: none; /* 変更：最大幅の制約をなくす */
    width: 970px;    /* 変更：固定幅にする（元々の最大幅） */
}


/* モバイル用の画像ラッパー */
.company-image-mobile-wrapper {
    padding-right: 36px;
}

/* --- モバイルのレイアウト調整 --- */
@media (max-width: 991px) {
    .company-catchphrase {
        margin-bottom: 2rem;
    }
}

/* 会社紹介セクションのoverflowで見切れやスクロールバー発生を防止 */
.company-section {
    overflow: hidden;
}

/* COMPANYのSVGを囲むdivに高さを設定し、下部をマスクする */
.company-svg-wrapper {
    height: 43px; /* この高さでSVGの下部が隠れます */
    overflow: hidden;
}


/* =======================================
// 保有車両イメージセクション (index.php)
// ======================================= */
.vehicle-image-section {
    margin-top: 120px;
    overflow: hidden;
}

/* 画像の半分から下を覆う背景 */
.vehicles-red-bg {
    background: linear-gradient(180deg, #fff 50%, #d81f26 50%);
	background-size: 50% 100%;
	background-repeat: no-repeat;
}
@media (max-width: 990.98px) {
	.vehicles-red-bg {
		background-size: calc(100% - 36px)100%;
	}
}
.vehicle-image-wrapper {
    position: relative;
    /* PC用：ラッパーの右端をウィンドウの右端に合わせる (962pxに修正) */
    margin-right: calc((962px - 100vw) / 2);
}

.vehicle-image-wrapper img {
    display: block;
    width: 100%;
    max-height: 705px;
    object-fit: cover;
    object-position: center;
}

/* --- モバイルでのレイアウト調整 --- */
@media (max-width: 990.98px) {
    /* コンテナ自体の右パディングを強制的に0にする */
    .vehicle-image-section .company-container {
        padding-right: 0;
    }

    /* PC用の特殊なマージンを解除する */
    .vehicle-image-wrapper {
        margin-right: 0;
    }
}

/* =======================================
// 保有車両テキストセクション (index.php)
// ======================================= */
.vehicles-text-container {
    max-width: 970px;
    position: relative;
}

.vehicles-text-section .vehicles-red-block {
    background: linear-gradient(270deg, #fff 50%, #d81f26 50%);
    padding-bottom: 100px;
}
@media (max-width: 990.98px) {
	.vehicles-text-section .vehicles-red-block {
	    background: linear-gradient(270deg, #fff 36px, #d81f26 36px);
	    padding-bottom: 60px;
	}
	.vehicles-text-section .text-column {
		color:#fff;
	}
}

.vehicles-text-section .text-column {
    display: flex;
    align-items: center; /* テキストを垂直方向に中央揃え */
}

.vehicles-text-section .text-column p {
    line-height: 1.7em;
    font-size: clamp(1.2rem, 1.7vw, 1.4rem);
    font-weight: bold;
}

.vehicles-text-section .vehicles-title-wrapper {
    height: 43px; /* SVGの下部が見切れないように高さを確保 */
    overflow: hidden;
}

.vehicles-text-section .arrow-wrapper {
    overflow: hidden;
    margin-top: -15px;
    display: flex;
    justify-content: flex-end;
}

.vehicles-text-section .arrow-svg {
    max-width: none;
    width: 970px;
}


/* =======================================
// 業務内容イメージセクション (index.php)
// ======================================= */
.works-image-section {
    margin-top: 120px;
    overflow: hidden;
}

.works-container {
    max-width: 970px;
    position: relative;
}
@media (max-width: 767.98px) {
    .works-container {
        padding: 0;
    }
}

/* 画像の右半分を黄色にする背景 */
.works-yellow-bg {
	background: no-repeat linear-gradient(180deg, #fff 50%, #fdd000 50%);
	background-size: 50% 100%;
	background-position: right;
}

/* =======================================
// 業務内容テキストセクション (index.php)
// ======================================= */
.works-text-container {
    max-width: 970px;
    position: relative;
}

/* テキストの左半分を黄色にする背景 */
.works-yellow-block {
	background: linear-gradient(90deg, #fff 50%, #fdd000 50%);
	padding-bottom: 100px;
}
@media (max-width: 767.98px) {
	.works-yellow-block {
		background: linear-gradient(90deg, #fff 36px, #fdd000 36px);
	    padding-bottom: 60px;
	}
}

.works-text-section .text-column p {
    line-height: 1.7em;
    font-size: clamp(1.2rem, 1.7vw, 1.4rem);
    font-weight: bold;
}

.works-footer {
    margin-top: 2rem;
}

.works-title-wrapper {
    height: 43px;
    overflow: hidden;
}

.works-footer .arrow-wrapper {
    overflow: hidden;
    margin-top: -15px;
    display: flex;
    justify-content: flex-end;
}

.works-footer .arrow-svg {
    max-width: none;
    width: 970px;
}


/* =======================================
// 採用情報イメージセクション (index.php)
// ======================================= */
.recruit-image-section {
    margin-top: 120px;
    overflow: hidden;
}

/* 画像の半分から下を覆う背景 */
.recruit-blue-bg {
    background: linear-gradient(180deg, #fff 50%, #0061c6 50%);
	background-size: 50% 100%;
	background-repeat: no-repeat;
}

.recruit-image-wrapper {
    position: relative;
    /* PC用：ラッパーの右端をウィンドウの右端に合わせる (962pxに修正) */
    margin-right: calc((962px - 100vw) / 2);
}

.recruit-image-wrapper img {
    display: block;
    width: 100%;
    max-height: 550px;
    object-fit: cover;
    object-position: center;
}

.recruit-gallery-wrapper {
    display: flex;
    width: 100%;
    height: auto; /* 高さを自動に */
    max-height: 550px; /* 高さの上限は維持 */
    overflow: hidden;
    aspect-ratio: 1056 / 550; /* 縦横比は維持 */
}

.recruit-gallery-item {
    flex: 0 0 25%;
    background-image: url('/img/index/recruit.webp');
    background-size: 400% auto; /* 変更点: 幅を基準に、高さは自動調整 */
    background-repeat: no-repeat;
    background-position-y: center; /* 縦方向は中央を基準に表示 */
}

/* 各アイテムの背景位置を再調整 */
.recruit-gallery-item.item-1 { background-position: 0% 0%; }
.recruit-gallery-item.item-2 { background-position: 33.33% 0%; }
.recruit-gallery-item.item-3 { background-position: 66.66% 0%; }
.recruit-gallery-item.item-4 { background-position: 100% 0%; }



/* --- モバイルでのレイアウト調整 --- */
@media (max-width: 990.98px) {
    /* コンテナ自体の右パディングを強制的に0にする */
    .recruit-image-section .company-container {
        padding-right: 0;
    }

    /* PC用の特殊なマージンを解除する */
    .recruit-image-wrapper {
        margin-right: 0;
    }
}

/* =======================================
// 採用情報テキストセクション (index.php)
// ======================================= */
.recruit-text-container {
    max-width: 970px;
    position: relative;
}

.recruit-text-section .recruit-blue-block {
    background: linear-gradient(270deg, #fff 50%, #0061c6 50%);
    padding-bottom: 100px;
}
@media (max-width: 990.98px) {
	.recruit-text-section .recruit-blue-block {
	    background: linear-gradient(270deg, #fff 36px, #0061c6 36px);
	    padding-bottom: 60px;
	}
	.recruit-text-section .text-column {
		color:#fff;
	}
}

.recruit-text-section .text-column {
    display: flex;
    align-items: center; /* テキストを垂直方向に中央揃え */
}

.recruit-text-section .text-column p {
    line-height: 1.7em;
    font-size: clamp(1.2rem, 1.7vw, 1.4rem);
    font-weight: bold;
}

.recruit-text-section .recruit-title-wrapper {
    height: 43px; /* SVGの下部が見切れないように高さを確保 */
    overflow: hidden;
}

.recruit-text-section .arrow-wrapper {
    overflow: hidden;
    margin-top: -15px;
    display: flex;
    justify-content: flex-end;
}

.recruit-text-section .arrow-svg {
    max-width: none;
    width: 970px;
}


/* --- モバイルでのレイアウト調整 --- */
@media (max-width: 575.98px) {
	.company-svg, .vehicles-title-svg, .works-title-svg, .recruit-title-svg { height:30px!important; }
}
@media (max-width: 990.98px) {
	.vehicles-text-container .text-column p, .recruit-text-section .text-column p { padding-right: 40px!important; }
	.vehicles-footer  .arrow-wrapper, .recruit-text-section .arrow-wrapper { padding-right: 40px!important; }
	.company-footer { margin-top: 30px; }
	.company-section { padding-top: 60px; }
}


/* =======================================
// 保有車両ページ
// ======================================= */
.js-scrollable table {
	min-width: 700px;
}

.js-scrollable { overflow-y: hidden!important; }

/* =======================================
// リスト表示
// ======================================= */
#sp-definition-list-1, #sp-definition-list-2, #sp-definition-list-3, #sp-definition-list-4, #sp-definition-list-6{
  margin-top : 0px;
  margin-left : 0px;
  margin-right : 0px;
  margin-bottom : 19px;
}

#sp-definition-list-1 > dd, #sp-definition-list-2 > dd, #sp-definition-list-3 > dd, #sp-definition-list-4 > dd, #sp-definition-list-6 > dd{
  margin-top : 10px;
  margin-left : 40px;
  margin-right : 0px;
  margin-bottom : 0px;
}

#sp-definition-list-1 > dt, #sp-definition-list-2 > dt, #sp-definition-list-3 > dt, #sp-definition-list-4 > dt, #sp-definition-list-6 > dt{
  padding-left : 15px;
  margin-top : 25px;
  border-left-width : 5px;
  border-left-style : solid;
  border-left-color : #008dd4;
}

#sp-definition-list-1 > dt:first-child, #sp-definition-list-2 > dt:first-child, #sp-definition-list-3 > dt:first-child, #sp-definition-list-4 > dt:first-child, #sp-definition-list-6 > dt:first-child{
  margin-top : 0px;
}

/* Works */
/* img-overのフェードイン・フェードアウトを制御するアニメーション */
@keyframes fade-loop {
    /* 0% (開始点) から 40% (4秒後) までは非表示 */
    0% {
        opacity: 0;
    }
    40% {
        opacity: 0;
    }
    
    /* 40% から 50% (次の1秒間) でフェードイン */
    50% {
        opacity: 1;
    }

    /* 50% から 90% (次の4秒間) は表示を維持 */
    90% {
        opacity: 1;
    }

    /* 90% から 100% (最後の1秒間) でフェードアウト */
    100% {
        opacity: 0;
    }
}

/* アニメーションを .img-over クラスに適用 */
.img-over {
    /* (4秒待機 + 1秒フェードイン + 4秒待機 + 1秒フェードアウト = 合計10秒) で無限ループ */
     opacity: 0;
    animation: fade-loop 10s infinite;
}


/* =======================================
// 採用情報ページ (recruit.php)
// ======================================= */

.recruit-hero {
    background-color: #fff;
    overflow-x: hidden;
    position: relative;
    padding-bottom: 227px;
}

/* 画像のコンテナを通常の配置に戻す */
.recruit-hero-image {
    position: relative;
    top: 227px;
    left: auto;
    right: auto;
    bottom: auto;
    width: 100%;
    height: auto;
}

/* 画像はアスペクト比を保つ */
.recruit-hero-image img {
    height: auto;
    width: 100%;
    object-fit: contain;
}

/* テキストを画像の上に絶対配置 */
.recruit-hero .hero-text {
    position: absolute;
    z-index: 2;
    display: flex;
    justify-content: flex-start;
    padding-left: 5vw;
}


/* テキストSVGのサイズと位置 (index.phpのロジックを適用) */
/* --- PCのスタイル --- */
@media (min-width: 769px) {
    /* .recruit-hero の子要素 */
    .recruit-hero > .hero-text.team { top: 135px; left: 0; }
    .recruit-hero > .hero-text.lift { top: 135px; left: 0; }
    
    /* .recruit-hero-image の子要素 */
    .recruit-hero-image .hero-text.future { top: 17px; left: 0; }
    .recruit-hero-image .hero-text.build { top: 17px; left: 0; }

    /* 中の画像(img)の高さ */
    .recruit-hero .hero-text img {
        height: 75px;
    }
}

/* --- モバイルのスタイル --- */
@media (max-width: 768px) {
	.recruit-hero {
	    padding-bottom: 122px;
	}
	.recruit-hero-image {
	    top: 122px;
	}
	
    /* .recruit-hero の子要素 */
    .recruit-hero > .hero-text.team {
        top: 86px;
        left: 0;
    }
    .recruit-hero > .hero-text.lift {
        top: 86px;
        left: 0;
    }
    
    /* .recruit-hero-image の子要素 */
    .recruit-hero-image .hero-text.future {
        top: 10px;
        left: 0;
    }
    .recruit-hero-image .hero-text.build {
        top: 10px;
        left: 0;
    }

    /* 中の画像(img)の高さ */
    .recruit-hero .hero-text img {
        height: 28px;
    }
}




/* =======================================
// リクルートイメージセクション 1
// ======================================= */
.saiyo-image-section {
    margin-top: 120px;
    overflow: hidden;
}

/* 画像の半分から下を覆う背景 */
.saiyo-orange-bg {
    background: linear-gradient(180deg, #fff 50%, #ed6f00 50%);
	background-size: 50% 100%;
	background-repeat: no-repeat;
}
@media (max-width: 990.98px) {
	.saiyo-orange-bg {
		background-size: calc(100% - 36px)100%;
	}
}
.saiyo-image-wrapper {
    position: relative;
    /* PC用：ラッパーの右端をウィンドウの右端に合わせる (962pxに修正) */
    margin-right: calc((962px - 100vw) / 2);
}

.saiyo-image-wrapper img {
    display: block;
    width: 100%;
    max-height: 705px;
    object-fit: cover;
    object-position: center;
}

/* --- モバイルでのレイアウト調整 --- */
@media (max-width: 990.98px) {
    /* コンテナ自体の右パディングを強制的に0にする */
    .saiyo-image-section .company-container {
        padding-right: 0;
    }

    /* PC用の特殊なマージンを解除する */
    .saiyo-image-wrapper {
        margin-right: 0;
    }
}

/* =======================================
// リクルートテキストセクション 1
// ======================================= */
.saiyo-text-container {
    max-width: 970px;
    position: relative;
}

.saiyo-text-section .saiyo-orange-block {
    background: linear-gradient(270deg, #fff 86px, #ed6f00 86px);
	    padding-bottom: 60px;
}
.saiyo-text-section .text-column {
	color:#fff;
}
@media (max-width: 990.98px) {
	.saiyo-text-section .saiyo-orange-block {
	    background: linear-gradient(270deg, #fff 36px, #ed6f00 36px);
	}
}

.saiyo-text-section h2 {
	font-size: clamp(1.5rem, 4.5vw, 3.1rem);
	line-height:160%;
}
.saiyo-text-section .text-column p {
    line-height: 1.7em;
    font-size: clamp(1.2rem, 1.7vw, 1.4rem);
    font-weight: bold;
}

.saiyo-text-section .saiyo-title-wrapper {
    height: 43px; /* SVGの下部が見切れないように高さを確保 */
    overflow: hidden;
}

/* =======================================
// リクルートイメージセクション 2
// ======================================= */
.saiyo-image-section2 {
    margin-top: 120px;
    overflow: hidden;
}

/* 画像の半分から下を覆う背景 */
.saiyo-green-bg {
    background: linear-gradient(90deg, #fff 86px, #009c7e 86px);
	background-size: 100% 50%;
	background-repeat: no-repeat;
	background-position:bottom;
}
@media (max-width: 1070.98px) {
	.saiyo-green-bg {
		background: linear-gradient(90deg, #fff 36px, #009c7e 36px);
		background-size: 100% 50%;
		background-repeat: no-repeat;
		background-position:bottom;
	}
}
.saiyo-image-wrapper2 {
    position: relative;
    /* PC用：ラッパーの左端をウィンドウの左端に合わせる (960pxに修正) */
    margin-left: calc((960px - 100vw) / 2);
}

.saiyo-image-wrapper2 img {
    display: block;
    width: 100%;
    max-height: 705px;
    object-fit: cover;
    object-position: center;
}

/* --- モバイルでのレイアウト調整 --- */
@media (max-width: 990.98px) {
    /* コンテナ自体の右パディングを強制的に0にする */
    .saiyo-image-section2 .company-container {
        padding-left: 0;
    }

    /* PC用の特殊なマージンを解除する */
    .saiyo-image-wrapper2 {
        margin-left: 0;
    }
}

/* =======================================
// リクルートテキストセクション 2
// ======================================= */
.saiyo-text-section .saiyo-green-block {
    background: linear-gradient(90deg, #fff 86px, #009c7e 86px);
}

@media (max-width: 1070.98px) {
	.saiyo-text-section .saiyo-green-block {
	    background: linear-gradient(90deg, #fff 36px, #009c7e 36px);
	}
}


/* =======================================
// リクルートData
// ======================================= */
.count .count-div {
  position: relative;
}
.count .count-wrap {
  position: absolute;
  /* px指定から%指定に変更してレスポンシブ対応 */
  top: 77%; /* 画像上の位置に合わせて調整してください (70%〜75%あたり) */
  left: 38%; /* 中央寄せ */
  transform: translateX(-50%); /* 中央軸を合わせる */
  display: inline-block;
  font-size: 7vw;
  font-weight: bold;
  line-height: 1em;
  margin-bottom: 0;
  white-space: nowrap; /* 折り返し防止 */
}

@media (min-width: 768px) {
  .count .count-wrap {
    font-size: 3.5vw;
  }
}
@media (min-width: 1000px) {
  .count .count-wrap {
    font-size: 35px;
  }
}


/* =======================================
// 採用情報：ケーススタディ (CSSのみで開閉)
// ======================================= */

/* 制御用チェックボックスは常に非表示 */
.case-toggle-checkbox {
    display: none;
}

/* カード全体のスタイル */
.case-study-card {
    background-color: #f5f5f5; /* 画像の下地に近い薄いグレー */
    border-radius: 10px;
    padding: 40px;
    position: relative;
}

/* --- 左側：プロフィール --- */
.case-profile-area {
    padding-right: 20px;
}

.profile-image img {
    width: 160px;
    height: 160px;
    border-radius: 50%;
    object-fit: cover;
    margin-bottom: 20px;
}

.profile-info {
    font-family: "Hiragino Kaku Gothic ProN", "Hiragino Sans", sans-serif;
}

.profile-info .job-en {
    font-size: 14px;
    letter-spacing: 0.1em;
    margin-bottom: 5px;
    text-transform: lowercase; /* 小文字にする */
}

.profile-info .name {
    font-size: 20px;
    font-weight: bold;
    margin-bottom: 5px;
}

.profile-info .career {
    font-size: 14px;
    font-weight: bold;
}

/* --- 右側：コンテンツ --- */
.case-lead {
    font-size: 18px;
    font-weight: bold;
    line-height: 1.6;
}

/* 本文エリア（初期状態） */
.case-body {
    position: relative;
    max-height: 80px; /* 閉じた状態の高さ */
    overflow: hidden;
    transition: max-height 0.5s ease; /* 開くときのアニメーション */
}

.case-body p {
    line-height: 1.8;
    font-size: 15px;
    color: #666;
    margin-bottom: 0;
}

/* 下部のグラデーションマスク */
.fade-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 60px;
    /* 下地の色(#f5f5f5)に合わせて透明からグレーへ */
    background: linear-gradient(to bottom, rgba(245, 245, 245, 0), #f5f5f5);
    pointer-events: none; /* 下のテキストを選択できないようにする */
    transition: opacity 0.3s;
}

/* プラスボタン */
.btn-expand {
    position: absolute;
    bottom: 30px;
    right: 30px;
    cursor: pointer;
    z-index: 10;
    transition: opacity 0.3s, transform 0.3s;
}

.btn-expand img {
    width: 50px; /* アイコンサイズ調整 */
    height: 50px;
}

.btn-expand:hover {
    transform: scale(1.1);
}


/* --- クリック時（開いた状態）の挙動 --- */

/* チェックボックスがONになったら、本文の高さを制限解除 */
.case-toggle-checkbox:checked ~ .case-study-card .case-body {
    max-height: 2000px; /* 十分な高さを指定 */
}

/* グラデーションを消す */
.case-toggle-checkbox:checked ~ .case-study-card .fade-overlay {
    opacity: 0;
    visibility: hidden;
}

/* プラスボタンを消す */
.case-toggle-checkbox:checked ~ .case-study-card .btn-expand {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}


/* --- モバイル調整 --- */
@media (max-width: 767.98px) {
    .case-study-card {
        padding: 30px 20px;
    }
    .case-profile-area {
        padding-right: 0;
        margin-bottom: 30px;
        text-align: center; /* スマホでは中央寄せ */
    }
    .profile-image img {
        margin-left: auto;
        margin-right: auto;
    }
    .btn-expand {
        bottom: 20px;
        right: 20px;
    }
    .btn-expand img {
        width: 40px;
        height: 40px;
    }
}


/* =======================================
// 業務風景スライドセクション
// ======================================= */
.work-slider-section {
    position: relative;
}

/* スライドリンク (画像ラッパー) */
.work-slide-link {
    display: block;
    width: 100%;
    /* 正方形にトリミングする設定 */
    aspect-ratio: 1 / 1; 
    overflow: hidden;
    position: relative;
}

/* 画像本体 */
.work-slide-link img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* アスペクト比を無視して枠いっぱいに表示（トリミング） */
    object-position: center;
    transition: transform 0.5s ease;
}

/* ホバー時のズーム効果（お好みで） */
.work-slide-link:hover img {
    transform: scale(1.05);
}

/* --- ナビゲーション矢印のカスタマイズ --- */
.work-swiper .swiper-button-next,
.work-swiper .swiper-button-prev {
    color: #fff; /* 矢印の色を白に */
    background-color: rgba(0, 0, 0, 0.3); /* 背景を半透明の黒に */
    width: 50px;
    height: 50px;
    border-radius: 50%; /* 丸くする */
    transition: background-color 0.3s;
}

.work-swiper .swiper-button-next:hover,
.work-swiper .swiper-button-prev:hover {
    background-color: rgba(0, 0, 0, 0.7); /* ホバー時に濃くする */
}

.work-swiper .swiper-button-next::after,
.work-swiper .swiper-button-prev::after {
    font-size: 20px; /* 矢印サイズ */
    font-weight: bold;
}

/* モバイルでの矢印調整（被らないように小さくするなど） */
@media (max-width: 767.98px) {
    .work-swiper .swiper-button-next,
    .work-swiper .swiper-button-prev {
        width: 40px;
        height: 40px;
        background-color: rgba(0, 0, 0, 0.5);
    }
    .work-swiper .swiper-button-next::after,
    .work-swiper .swiper-button-prev::after {
        font-size: 16px;
    }
}