@charset "utf-8";

/* ------------------------
メインコンテンツ
--------------------------- */


/* =========================================
   Concept セクション (SP/PC共通修正)
   ========================================= */

.concept-section {
    position: relative;
    padding: 80px 0 50px; /* 下に画像がはみ出るので余白多めに */
    overflow: hidden;
}

/* 背景の画像帯 */
.concept-section::be
re {
    content: "";
    position: absolute;
    top: 50px;   
    left: 0;
    width: 100%;
    height: 42%;
    min-height: 450px;  
    background-image: url('../img/index/bg-pc.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;        
    z-index: -1; /* コンテンツの下に潜り込ませる */
}
@media (min-width: 768px) {
    .concept-section::before {
        content: "";
        position: absolute;
        top: 23%;
        left: 0;
        width: 100%;
        height: 50%;
        background-image: url(../img/index/bg-pc.jpg);
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center;
        z-index: -1;
    }
}
    /* =========================================
   SP版レイアウト (スマホ)
   ========================================= */

/* --- 全体の枠 --- */
.concept-flex-box {
    width: 100%;
    position: relative; /* 念の為 */
}

/* --- ビジュアルエリア（タイトル ＋ 画像たち） --- */
.concept-visual {
    /* ★ここ重要：タイトルと画像を横並びにする */
    display: flex;
    justify-content: space-between; 
    align-items: flex-start; /* 上揃え */
    
    position: relative;
    width: 100%;
    max-width: 650px;
    height: 400px; /* ★重要：画像を絶対配置するので高さを確保 */
    margin: 0 auto 40px;
}
/* .inner-width::before {
        content: ""; 
        position: absolute;          
        top: 25%;      
        height: 50%;   
        width: 100%;    
        left: 0;
        background-image: url('../img/index/bg-pc.jpg');
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center;        
        z-index: -1; 
} */

/* 縦書きタイトル */
.concept-vertical-title {
    writing-mode: vertical-rl;
    font-size: min(7vw, 40px);
    letter-spacing: 0.3em;
    margin-right: 15px;
    margin-top: 20px; /* 少し下げる */
    color: #333;   
    /* タイトルの幅を固定して崩れ防止 */
    flex-shrink: 0; 
    font-family: 'Montserrat', sans-serif;
    font-weight: 300;
}

/* --- 画像エリア--- */
.concept-images {
    /* 残りの幅を全部使う */
    flex-grow: 1; 
    position: relative; /* 子要素の基準点 */
    height: 100%;       /* 親の高さいっぱい使う */
}

/* 1枚目の画像（左上） */
.concept-images .img-01 {
    width: 50%; /* 少し小さめに */
    position: absolute; /* 自由に配置 */
    top: 0;
    left: 0;
    z-index: 1;
}

/* 2枚目の画像（右下・少しはみ出る） */
.concept-images .img-02 {
    width: 80%;
    position: absolute; /* 自由に配置 */  
    /* デザインに合わせて位置調整 */
    bottom: 50px; 
    right: 0;  
    z-index: 2; /* 手前に */
    /* border: 5px solid #fff;  */
}

/* 画像共通設定 */
.concept-images img {
    width: 100%;
    display: block;
    box-shadow: 0 10px 20px rgba(0,0,0,0.1); /* 影をつけて立体的に */
}

/* --- テキストエリア --- */
.concept-desc {
    width: 100%;
    max-width: 450px;
    margin: auto;
    display: flex;
    flex-direction: column;
    align-items: flex-end; /* 右寄せ */
    padding: 20px; /* 画像と被らないように調整 */
}

/* (以下テキスト等のCSSは前回と同じ) */
.desc-text {
    font-size: 14px;
    line-height: 2;
    margin-bottom: 30px;
    width: 100%;
    text-align: left;
}

/* =========================================
   PC版レイアウト (1024px以上)
   ========================================= */
@media (min-width: 768px) {

    /* ▼▼▼ 1. 親玉：ここには絶対に flex が必要！ ▼▼▼ */
    /* これがないと、画像とテキストが横に並びません */
    .concept-flex-box {
        display: flex !important;  /* 強制的にFlexにする */
        justify-content: center;   /* 中央寄せ */
        align-items: center;       /* 上下中央 */
        gap: 60px;                 /* 隙間 */
        flex-wrap: nowrap;         /* ★重要：絶対に折り返させない */
        max-width: 1200px;
        margin: 0 auto;
    }

    /* ▼▼▼ 2. 左の箱（画像エリア）：ここは flex 禁止！ ▼▼▼ */
    /* ここは display: block にして、position: absolute を使えるようにする */
    .concept-visual {
        display: block;      /* SPの flex を打ち消す */
        position: relative;  /* 基準点 */
        width: 50%;
        /* width: 520px;         */
        height: 500px;       
        
        flex-shrink: 0;      /* ★重要：親が狭くても、この箱は縮ませない */
        margin: 0;           /* 余白リセット */
    }

    /* --- 画像とタイトルの配置（前回と同じでOK） --- */
    .concept-vertical-title {
        position: absolute;
        top: -20%;
        left: 0;
        margin-top: 4em;
        z-index: 10;
        font-size: min(4vw, 50px);
        letter-spacing: 0.3em;
        transform: scalex(0.8);
    }
    
    .concept-images {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
    }

    .concept-images .img-01 {
        position: absolute;
        top: 0;
        left: 80px;
        width: 260px;
        z-index: 5;
    }

    .concept-images .img-02 {
        position: absolute;
        bottom: 0%;
        right: 0;
        width: 320px;
        z-index: 6;
  
    }

    /* ▼▼▼ 3. 右の箱（テキストエリア） ▼▼▼ */
    .concept-desc {
        /* 残りのスペースに収める */
        width: 400px;        
        flex-shrink: 1;      /* 画面が狭すぎたら少し縮んでもいい */
        
        display: flex;
        flex-direction: column;
        align-items: flex-start; /* 左寄せ */
        text-align: left;
    }
    
    .desc-text {
        margin-bottom: 40px;
    }
    .concept-images img {
        /* width: 100%;
        min-width: 345px; */
        display: block;
        box-shadow: 0 10px 20px rgba(0,0,0,0.1); /* 影をつけて立体的に */
    }
    .img-02 img {
        /* width: 100%;
        min-width: 535px;
        min-height: 450px; */
        object-fit: fill;
        display: block;
        box-shadow: 0 10px 20px rgba(0,0,0,0.1); /* 影をつけて立体的に */
    }
}
/* =========================================
   追加装飾：縦書きタイトル下のライン
   ========================================= */

/* 基準点を作る */
.concept-vertical-title {
    position: relative; /* 線を絶対配置するための基準 */
    /* 以前の display: flex などの指定はそのままでOK */
}

/* ラインの描画（共通） */
.concept-vertical-title::after {
    content: "";
    position: absolute;
    background-color: #333; /* 線の色 */
}

/* --- SP版のライン位置 --- */
/* 縦書き(vertical-rl)なので、物理的には「下」ではなく「左」などが座標軸になりますが、
   ここは直感的に配置しやすい absolute で指定します */
@media (max-width: 1023px) {
    .concept-vertical-title::after {
        width: 1px;       /* 線の太さ */
        height: 60px;     /* 線の長さ（お好みで調整） */
        
        /* 位置合わせ：タイトルの「下」に配置 */
        bottom: -80px;    /* 文字数によって調整が必要かもしれません */
        left: 50%;        /* 文字の真ん中 */
        transform: translateX(-50%); /* 芯を合わせる */
    }
    
    /* ※もし線が文字に重なってしまう場合は、bottomの数値をいじってください。
       または、margin-bottom で余白を作るのも手です */
}

/* --- PC版のライン位置 --- */
@media (min-width: 1024px) {
    .concept-vertical-title::after {
        width: 1px;
        height: 60px;     /* PCは少し長く */
        
        /* PCはタイトル自体が absolute で中央配置されているので、
           その「下」に垂らすイメージ */
        bottom: -100px; 
        left: 50%;
        transform: translateX(-50%);
    }
}


/* =========================================
   追加装飾：VIEW MORE ボタン（丸い矢印付き）
   ========================================= */

.view-more-btn {
    /* 以前の border: 1px solid #333; は削除するか上書きしてください */
    border: none !important; /* 線を消す */
    padding: 0 !important;   /* 余白もリセット */
    
    /* レイアウト */
    display: inline-flex;    /* 横並び */
    align-items: center;     /* 上下中央揃え */
    gap: 15px;               /* テキストと矢印の距離 */
    
    /* 文字スタイル */
    font-family: "Noto Serif JP"; 
    font-size: 14px;
    letter-spacing: 0.1em;
    color: #333;
    text-decoration: none;
    transition: opacity 0.3s;
}
.concept-view{
    margin-left: 50%;
}

/* ホバー時の動き */
.view-more-btn:hover {
    opacity: 0.7;
}

/* --- 丸い矢印アイコンを作る (::after) --- */
.view-more-btn::after {
    content: "";
    display: block;
    width: 30px;    /* 丸の幅 */
    height: 30px;   /* 丸の高さ */
    border: 0.4px solid #333; /* 丸い枠線 */
    border-radius: 50%;     /* 完全な円にする */
    
    /* 矢印画像がある場合は background-image で指定しますが、
       ここではCSSだけで「＞」マークを描画するテクニックを使います */
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23333%22%20stroke-width%3D%221%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpolyline%20points%3D%229%2018%2015%2012%209%206%22%2F%3E%3C%2Fsvg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 22px; /* 中の矢印のサイズ */
}


/* =========================================
   New graduate セクション (SP/PC共通修正)
   ========================================= */
/* =========================================
   共通コンポーネント：オーバーラップセクション
   (.c-section-overlap)
   ========================================= */

/* セクション全体の余白 */
.c-section-overlap {
    position: relative;
    padding: 80px 0;
    margin-top: 15%;
    /* 必要に応じて背景設定などをここに追加 */
}
.new-graduate-section{
    margin-top: 0;
}
/* new-graduate背景の青い波（疑似要素で設定） */
.new-graduate-section::before {
    content: "";
    position: absolute;
    top: 10%;
    left: 0;
    width: 100%;
    height: 50%;
    background-image: url(../img/index/bg-pc.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    z-index: -1;
}

/* コンテナ（Flexの親枠になる予定） */
.c-overlap-container {
    width: 100%;
    position: relative;
}

/* --- 白いテキストボックスエリア --- */
.c-overlap-content {
    padding: 40px 20px 220px;     
    position: relative;
    z-index: 10;
    margin: 0 auto;
    width: auto;
}
/* ヘッダー周り */
.c-section-header {
    margin-bottom: 30px;
    text-align: center;
    margin-left: 1em;
    width: fit-content;
}
/* .section-title, .ja-title は既存の共通クラスを利用 */

/* 本文 */
.c-overlap-text {
    font-size: 14px;
    line-height: 2;
    margin-bottom: 40px;
}

/* ② ボタン：箱の「フチ」に固定する */
.c-overlap-btn-area {
    position: absolute;
    bottom: -10%;     
    /* right: 20px; */
    left: 50%;
    z-index: 20;
}

/* ③ 画像：ボタンの位置に合わせて　右寄せ */
.c-overlap-image {
    position: relative;
    z-index: 1; /* 白い箱より奥にする */
    margin-top: -240px;    
    width: 80%;
    max-width: 380px;
    margin-left: auto; 
}
/* mid-career-section画像 左寄せ*/
.c-mid-overlap {
    position: relative;
    z-index: 1;
    margin-top: -240px;
    width: 80%;
    max-width: 380px;
    margin-left: 0;
}

/* new-graduate背面のグレーボックス */
.gray-bg-graduate{
    position: absolute;
    z-index: 1;
    width: 50%;
    height: 65%;
    top: 25%;
    left: 44%;
    background-color: #f4f4f4;
    opacity: 0.9;
}
/* mid-career背面のグレーボックス */
.gray-bg-mid{
    position: absolute;
    z-index: 1;
    width: 95%;
    height: 56%;
    top: 50%;
    right: 0;
    background-color: #f4f4f4;
    opacity: 0.9;
}

/* =========================================
   タブレット版 (768px 〜 1023px) の安全策
   ========================================= */
@media (min-width: 768px) and (max-width: 1023px) {

    /* コンテナを中央寄せにする */
    .c-overlap-container {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    /* 白い箱：横に伸びすぎないように「最大幅」を決める */
    .c-overlap-content {
        width: 100%;        /* 基本は100% */
        max-width: 500px;   /* ★重要：500px以上には広がらせない！ */
        /* これでテキストの改行位置がスマホと近くなり、高さが確保されます */
        
        padding-bottom: 180px; /* 微調整（SPより少し減らしてもいいかも） */
    }

    /* 画像：こちらも幅を制限 */
    .c-overlap-image {
        width: 100%;
        max-width: 400px;   /* ほどよいサイズに制限 */
        
        margin-top: -180px; /* ★高さが変わるので、重ねる量も少し調整 */
    }

    /* ボタン位置の微調整 */
    .c-overlap-btn-area {
        bottom: -35%; 
    }
}
/* =========================================
   PC版レイアウト (1024px以上)
   ========================================= */
@media (min-width: 768px) {

    .c-section-overlap {
        padding: 120px 0;
        margin-top: 20vh;
    }

    /* --- コンテナをFlexbox化 --- */
    .c-overlap-container {
        display: flex;
        align-items: center;
        justify-content: center;
        max-width: 1000px;
        margin: 0 auto;
        gap: 12%;
    }
    .c-section-header {
        width: 50%;
        margin-bottom: 30px;
        text-align: left;
        margin: 2em auto;
    }
    .mid-section-header {
        width: 50%;
        margin-bottom: 30px;
        text-align: center;
        margin: 0 auto 6em;
    }
    /* --- 白いテキストボックス --- */
    .c-overlap-content {
        width: auto;
        max-width: 500px; 
        padding: 80px; /* PC用のたっぷり余白 */
        margin: 0;     /* SPの中央寄せリセット */
        flex-shrink: 0; /* 幅を維持 */
    }
    
    /* PCでのボタン位置（必要なら左寄せなどに変更） */
    /* .c-overlap-btn-area { text-align: left; } */

    /* --- 画像エリア --- */
    .c-overlap-image {
        max-width: 600px; /* 幅固定 */
        margin: 0;    /* SPの右寄せリセット */
        flex-shrink: 0;
        
        /* ★PCでの重ね技 */
        margin-left: -80px; /* 左へずらして重ねる */
        margin-top: 0;      /* SPの上ずらしをリセット */
    }
    /* 背景の青い波（疑似要素で設定） */
    .new-graduate-section::before {
        content: "";
        position: absolute;
        top: 10%;
        left: 0;
        width: 65%;
        height: 75%;
        background-image: url(../img/index/bg-pc.jpg);
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center;
        z-index: -1;
    }


    .gray-bg-graduate{
        position: absolute;
        z-index: 1;
        width: 20%;
        height: 100%;
        top: 20%;
        left: 40%;
        background-color: #f4f4f4;
        opacity: 0.9;
    }
    /* mid-career背面のグレーボックス */
    .gray-bg-mid{
        position: absolute;
        z-index: 1;
        width: 49%;
        height: 56%;
        top: 66%;
        left: 0;
        background-color: #f4f4f4;
        opacity: 0.9;
    }

}

/* =========================================
   New Graduate タイトル横のライン装飾
   ========================================= */

/* まず、親となるタイトルを「文字の幅に合わせる」設定にします
   これがないと、線がとんでもなく遠く（右端）に行ってしまいます */
 .section-title {
    position: relative;    /* 線の基準点 */
    display: inline-block; /* ★重要：ブロック幅を文字幅に合わせる */
    z-index: 10;
}

/* ラインの共通設定（今回は横線） */
 .section-title::after {
    content: "";
    position: absolute;
    background-color: #333; /* 線の色（必要なら#999などに変更） */
    
    /* 上下中央揃えの魔法（縦書きの時のtranslateXとは逆になります） */
    top: 50%;
    transform: translateY(-50%);
}

/* --- SP版のライン（短め） --- */
@media (max-width: 1023px) {
    .section-title::after {
        height: 1px;      /* 線の太さ（横書きなのでheightが細くなる） */
        width: 40px;      /* 線の長さ */
        
        /* 位置合わせ：タイトルの「右」に配置 */
        left: 100%;       /* 文字の終わりの位置 */
        margin-left: 20px; /* 文字と線の隙間 */
    }
}

/* --- PC版のライン（長め） --- */
@media (min-width: 1024px) {
     .section-title::after {
        height: 1px;      /* 線の太さ */
        width: 60px;      /* 線の長さ（PCは少し長く） */
        
        /* 位置合わせ */
        left: 100%;
        margin-left: 30px; /* PCは隙間も少し広く */
    }
}

/* =========================================
   Mid-career  画像とテキスト逆転
   ========================================= */
   /* mid-career-section背景の青い波（疑似要素で設定） */
.mid-career-section::before {
    content: "";
    position: absolute;
    top: 10%;
    left: 0;
    width: 100%;
    height: 50%;
    background-image: url(../img/index/bg-pc.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    z-index: -1;
}
   /* =========================================
   PC版レイアウト (1024px以上)
   ========================================= */
@media (min-width: 768px) {
    /* 1. フレックスの向きを逆にする（左に画像、右にテキスト） */
    .c-overlap-container.is-reverse {
        flex-direction: row-reverse;
    }

    /* 2. 画像の食い込み方向を逆にする */
    .c-overlap-container.is-reverse .c-overlap-image {
        margin-left: 0;       /* 左の食い込みをリセット */
        margin-right: -80px;  /* 右へ食い込ませる */
    }
        /* 背景の青い波（疑似要素で設定） */
    .mid-career-section::before {
        content: "";
        position: absolute;
        top: 10%;
        right: 0;
        left: auto;
        width: 65%;
        height: 75%;
        background-image: url(../img/index/bg-pc.jpg);
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center;
        z-index: -1;
    }
}


/* =========================================
   Recruit セクション固有設定
   （縦書きタイトルへのカスタマイズ）
   ========================================= */
.recruit-section{
    margin-top: 100px;
}
/* --- 1. 白い箱の中に「縦書きタイトル」を置くスペースを作る --- */
.recruit-section .c-overlap-content {
    position: relative; /* 位置の基準点 */
    
/* ★ここが原因！ */
    /* 縦書きタイトルの分、左の余白をガツンと増やしてテキストを右に押しやる */
    padding-left: 90px !important;  
    
    /* 上の余白も、タイトルと被らないよう調整 */
    padding-top: 60px;
}

/* --- 2. タイトルを縦書きにして配置 --- */
.recruit-section .section-title {
    /* ★縦書きの魔法 */
    writing-mode: vertical-rl;
    text-orientation: mixed; /* アルファベットを横向きに */
    
    /* 絶対配置で左上のスペースに固定 */
    position: absolute;
    top: 50px;   /* 上からの位置 */
    left: 0;  /* 左からの位置 */
    
    margin: 0;
    letter-spacing: 0.3em;
    line-height: 1;
}

/* --- 3. タイトル横の棒線を「縦線」に変える --- */
.recruit-section .section-title::after {
    /* 共通クラス(横線)の設定を上書き */
    width: 1px;         /* 太さ */
    height: 60px;       /* 長さ */
    
    /* 位置合わせ：文字の下（物理的には下）へ */
    position: absolute;
    top: auto;          /* 横書き用のtopを解除 */
    bottom: -80px;      /* 文字の下に配置 */
    left: 50%;          /* 左右中央 */
    transform: translateX(-50%); /* 芯を合わせる */
    
    margin-left: 0;     /* 横書き用の余白解除 */
    background-color: #333;
}
   /* mid-career-section背景の青い波（疑似要素で設定） */
    .recruit-section::before {
        content: "";
        position: absolute;
        top: 10%;
        left: 0;
        width: 100%;
        height: 50%;
        background-image: url(../img/index/bg-pc.jpg);
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center;
        z-index: -1;
    }

    .recruit-overlap-image{
        max-width: fit-content;
        margin: 0;
        flex-shrink: 0;
        margin-left: auto;
        margin-top: -7%;
        width: 70%;
    }
    .gray-bg-recruit{
        position: absolute;
        z-index: 1;
        width: 77%;
        height: 90%;
        top: 5%;
        left: 23%;
        background-color: #f4f4f4;
        opacity: 0.9;
    }
/* --- SP版の微調整（画面が狭いとき用） --- */
@media (max-width: 767px) {
    .recruit-section
     .c-overlap-content {
        padding: 20px !important;
        width: 100%;
    }
    .recruit-section .section-title {
        left: 6%;         /* 左端に寄せる */
    }

}
   /* =========================================
   PC版レイアウト (1024px以上)
   ========================================= */
@media (min-width: 768px) {
    /* 背景の青い波（疑似要素で設定） */
    .recruit-section::before {
        content: "";
        position: absolute;
        top: 23%;
        left: 0;
        width: 100%;
        height: 50%;
        background-image: url(../img/index/bg-pc.jpg);
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center;
        z-index: -1;
    }

    /* --- 画像とタイトルの配置（前回と同じでOK） --- */
    .recruit-vertical-title {
        position: absolute;
        top: -20%;
        left: 0;
        margin-top: 4em;
        z-index: 10;
        font-size: min(4vw, 50px);
        letter-spacing: 0.3em;
        transform: scalex(0.8);
    }
    .recruit-overlap-image{
        max-width: fit-content;
        margin: 0;
        flex-shrink: 0;
        margin-left: 50px;
        margin-top: 0;
        width: 100%;
    }
    /* new-graduate背面のグレーボックス */
    .gray-bg-recruit{
        position: absolute;
        z-index: 1;
        width: 25%;
        height: 91%;
        top: 59%;
        left: 15%;
        background-color: #f4f4f4;
        opacity: 0.9;
    }
}

/* =========================================
   Contact セクション固有設定
   ========================================= */
   /* contact-section背景の青い波（疑似要素で設定） */
    .contact-section::before {
        content: "";
        position: absolute;
        top: 10%;
        left: 0;
        width: 100%;
        height: 50%;
        background-image: url(../img/index/bg-pc.jpg);
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center;
        z-index: -1;
    }
    /* --- タイトル横のライン（横線） --- */
    .contact-section .section-title {
        position: relative;
        display: inline-block; /* 文字幅に合わせる */
    }

    .contact-section .section-title::after {
        content: "";
        position: absolute;
        background-color: #333;
        
        /* 上下中央揃え */
        top: 50%;
        transform: translateY(-50%);
    }
    .gray-bg-contact{
        position: absolute;
        z-index: 1;
        width: 51%;
        height: 91%;
        top: 4%;
        left: 5%;
        background-color: #f4f4f4;
        opacity: 0.9;
    }
    .contact-overlap-image{
        position: relative;
        z-index: 1;
        /* margin-top: 0; */
        width: 37%;
        /* max-width: 380px; */
        min-width: 197px;
        margin-left: 5%;
    }
    .cotact-linkbtn {
        position: absolute;
        /* bottom: 25%; */
        /* top: 56%; */
        z-index: 20;
        right: 0;
    }

/* SP版のライン（短め） */
@media (max-width: 1023px) {
    .contact-section .section-title::after {
        height: 1px;       /* 横線なので高さ1px */
        width: 40px;       /* 長さ */
        
        left: 100%;        /* 文字の右側 */
        margin-left: 20px; /* 余白 */
    }
}

/* PC版のライン（長め） */
@media (min-width: 1024px) {
    .contact-section .section-title::after {
        height: 1px;
        width: 60px;       /* PCは長く */
        
        left: 100%;
        margin-left: 30px;
    }
    .gray-bg-contact{
        position: absolute;
        z-index: 1;
        width: 53%;
        height: 33%;
        top: 97%;
        left: 12%;
        background-color: #f4f4f4;
        opacity: 0.9;
    }
    .contact-section::before {
        content: "";
        position: absolute;
        top: 0%;
        right: 0;
        left: auto;
        width: 44%;
        height: 87%;
        background-image: url(../img/index/bg-pc.jpg);
        background-repeat: no-repeat;
        background-size: cover;
        background-position: left;
        z-index: -1;
    }
    .contact-overlap-container {
        display: flex;
        align-items: center;
        justify-content: start;
        max-width: 1000px;
        margin: 0 auto;
        gap: 4%;
    }
    .c-contact-header {
        width: 50%;
        margin-bottom: 30px;
        text-align: left;
        /* margin: 0 auto; */
        margin-top: 1em;
        margin-left: -3em;
    }
}

/* --- コンテンツの余白調整（Recruitの縦書き用余白をリセット） --- */
/* RecruitのCSSで .c-overlap-content に padding-left をつけている場合、
   Contactでは不要なので、念の為標準に戻しておくと安全です 
.contact-section .c-overlap-content {*/
    /* 必要なら調整（通常は共通クラスのままでOK） */
    /* padding-left: 30px; */